ASP.NET - CSS для центрирования метки под ImageButton?

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.

Кто-нибудь знает, как мне правильно оформить стиль? Спасибо за тонну заранее! Кроме того, это может быть проблемой с моим дизайном / макетом разметки. Я не против изменить это при необходимости - я просто решил, что проблему можно решить с помощью 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;

[править] в зависимости от вашего вывода ...

По сути, я оборачиваю кнопку image, span в свои собственные div.И оборачивая оба div в другой div с колонкой класса css.И родительский div span создан для выравнивания текста по центру.

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 ширину и примените к ней поле. Поля авто будет центрировать его на контейнере.

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

Answer 3

Попробуйте это:

.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;

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

Попробуйте добавить

text-align: center;

в блок .VoteFont