CODEWITHSUNDEEP
c#asp.netcsslabelimagebutton
JToland
JToland

Reputation: 3710

ASP.NET - CSS to Center Label Under ImageButton?

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.

example

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>

Upvotes: 1

Views: 4027

Answers (5)

Artur Michajluk
Artur Michajluk

Reputation: 1967

Try this:

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

If This wouldn't work try to replace 

display: inline-block;

with

display: inline-table;

Upvotes: 0

mildog8
mildog8

Reputation: 2154

do this

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

this should do the trick

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

Upvotes: 0

chandmk
chandmk

Reputation: 3481

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>

Upvotes: 1

tpolyak
tpolyak

Reputation: 1239

Try adding

text-align: center;

to .VoteFont block

Upvotes: 0

Only Bolivian Here
Only Bolivian Here

Reputation: 36733

Give .VoteFont a width and apply a margin to it. Margin auto will center it on the container.

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

Upvotes: 1

Related Questions