Question

I’m trying to get a <asp:Label> to appear centered under a <asp:ImageButton>. Right now, the buttons are tied to objects in a List and so I have them all in a ListView control like this:

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

For this, I have the following CSS:

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

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

Right now, the <asp:Label> is appearing to the far right under the ImageButtons. I’ve been trying various CSS styles to get them centered under, but I’ve just not been able to get the CSS right.

Does anyone know how I can get the styling just right? Thanks A TON in advance! Also, this could be an issue with my Markup design/layout. I’m not opposed to changing that if necessary – I just figured the issue could be fixed via CSS.

Here is an example of what I mean and also the outputted HTML code that is created:

<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

Add the following to the .VoteFont

 display: block;

[edit] based on your output…

Essentially I am wrapping imagebutton, span in their own divs. And wrapping both the divs in another div with the css class column. And span’s parent div is styled to align the text to center.

CSS

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

Asp.net code

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

Resulting 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>