ASP.NET - CSS 在 ImageButton 下居中标签？

Question

我试图让 在 下显示居中。现在，这些按钮与 List 中的对象绑定在一起，因此我将它们全部放在 ListView 控件中，如下所示：

<asp:ListView ID="lv_WantedBooks" runat="server">
    <ItemTemplate>
        <asp:ImageButton ID="bookImageButton" runat="server" CssClass="BookImageButton" ImageUrl='<%# Eval("Image.ImageUrl") %>' OnClick="bookImageButton_Click" ToolTip='<%# Eval("Title") %>' CommandName='<%# Eval("Title") %>' />
        <asp:Label ID="bookVoteCount" runat="server" Text='<%# Eval("Votes") %>' cssclass="VoteFont"/>
    </ItemTemplate>
</asp:ListView>

为此，我有以下 CSS：

.BookImageButton
{
    padding: 25px 25px 25px 25px;
    background: #625863;
    height: 220px;
    width: 182px;
}

.VoteFont
{
    font-size: 1.8em;
    color: #C3980D;
    font-weight: bolder;
}

现在， asp:Label> 显示在图像按钮下方的最右侧。我一直在尝试各种 CSS 样式来让它们居中，但我一直无法获得正确的 CSS。

有谁知道如何才能使造型恰到好处？预先感谢！另外，这可能是我的标记设计/布局的问题。我并不反对在必要时进行更改 - 我只是认为这个问题可以通过 CSS 来解决。

以下是我的意思的示例以及创建的输出 HTML 代码：

<p>
<input type="image" name="ctl00$MainContent$lv_WantedBooks$ctrl0$bookImageButton" id="MainContent_lv_WantedBooks_bookImageButton_0" title="Pride and Prejudice" class="BookImageButton" src="[blah, blah, this is correct in the output, trust me.]" />
<span id="MainContent_lv_WantedBooks_bookVoteCount_0" class="voteFont">1</span>


<input type="image" name="ctl00$MainContent$lv_WantedBooks$ctrl1$bookImageButton" id="MainContent_lv_WantedBooks_bookImageButton_1" title="Sense and Sensibility" class="BookImageButton" src="[blah, blah, this is correct in the output, trust me.]" />
<span id="MainContent_lv_WantedBooks_bookVoteCount_1" class="voteFont">1</span>

<br />
<div align="center"><h2><b>Don't See Your Choice? Enter it Below!</b></h2>
<input name="ctl00$MainContent$tb_NewBookTitle" type="text" id="MainContent_tb_NewBookTitle" style="height:20px;width:275px;" />
<br /></div>
</p>

Answer 1

将以下内容添加到 .VoteFont

 display: block;

根据您的输出

[编辑]...本质上我正在将 imagebutton、span 包装在它们自己的 div 中。并使用 css 类列将这两个 div 包装在另一个 div 中。 span 的父 div 的样式设置为将文本居中对齐。

CSS

.column {
   float:left; position:relative;margin:5px; 
}

Asp.net 代码

 <div class="column">
        <div>
            <asp:ImageButton ID="bookImageButton" runat="server" CssClass="BookImageButton" ImageUrl="..." /></div>
        <div style="text-align: center;">
            <asp:Label ID="bookVoteCount" runat="server" CssClass="VoteFont" Text="1" /></div>
    </div>

生成的 Html

   <div class="column">
   <div>
<input type="image" name="ctl00$MainContent$lv_WantedBooks$ctrl0$bookImageButton" id="MainContent_lv_WantedBooks_bookImageButton_0" align="bottom" title="Pride and Prejudice" class="BookImageButton" />
</div>
<div style="text-align: center">
<span id="MainContent_lv_WantedBooks_bookVoteCount_0" class="voteFont">1</span></div>
</div>
<div class="column">
<div>
<input type="image" name="ctl00$MainContent$lv_WantedBooks$ctrl1$bookImageButton" id="MainContent_lv_WantedBooks_bookImageButton_1" title="Sense and Sensibility" class="BookImageButton"  />
</div>
<div style="text-align: center">
<span id="MainContent_lv_WantedBooks_bookVoteCount_1" class="voteFont">1</span>
</div>
</div>

Answer 2

给 .VoteFont 一个宽度并为其应用边距。 Margin auto 会将其置于容器的中心。

.VoteFont {
    font-size: 1.8em;
    color: #C3980D;
    font-weight: bolder;
    width: 80px;
    margin: auto;
}

Answer 3

尝试添加

text-align: center;

到 .VoteFont 块

Answer 4

这样做

.VoteFont
{
    font-size: 1.8em;
    color: #C3980D;
    font-weight: bolder;
    float: left;
    display: block;
    margin: auto;
}

这应该可以解决问题

.VoteFont
{
    font-size: 1.8em;
    color: #C3980D;
    font-weight: bolder;
    position: relative;
        left: -30px;
}

Answer 5

试试这个：

.BookImageButton
{
    padding: 25px 25px 25px 25px;
    background: #625863;
    height: 220px;
    width: 182px;
    margin-bottom: 25px;
}

.VoteFont
{

    font-size: 1.8em;
    color: #C3980D;
    font-weight: bolder;
    position: relative;
    left: -157px;
    display: inline-block;
    margin-top: 50px;
}

如果这不起作用尝试替换

display: inline-block;

为

display: inline-table;