Question

我正试图让<asp:Label>在<asp:ImageButton>下显示居中。现在，按钮被绑定到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>出现在ImageButtons的最右边。我一直在尝试各种CSS样式让它们居中，但我还是没能把CSS弄好。

有谁知道我怎样才能让造型恰到好处？非常感谢TON！此外，这个可能是我的标记设计/布局的问题。我不反对在必要时更改它 - 我只是想通过CSS修复问题。

example

以下是我的意思以及创建的输出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一个宽度并为其应用边距。保证金自动将它集中在容器上。

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

Answer 2

将以下内容添加到.VoteFont

 display: block;

[edit]根据您的输出...

基本上我正在包装图像按钮，跨越自己的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 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;

ASP.NET - 在ImageButton下的CSS到中心标签？

5 个答案: