Question

In my CSS file I have:

.Center
{
    position:relative;
    width:800px;
    margin-left: auto;
    margin-right: auto;
}

Then, when I have the following all is well:

<div class="Center">
    <asp:ImageButton ID="ImageButton1" ImageUrl="..." runat="server" />
</div>

But if I remove the div and add a CssClass instead – it ignores the class:

<asp:ImageButton ID="ImageButton1" ImageUrl="..." runat="server" CssClass="Center" />

Why?

Answer 1

Because an asp:ImageButton renders out as <input type="image" ... />. Your first example has a <div> wrapping the image button, and the styling is applied on the <div>. Your second example is attempting to style the <input type="image" ... /> directly (which doesn’t work because it’s not a block element).

You can use an <asp:Panel> (which renders as a <div>) for equivalent code:

<asp:Panel runat="server" CssClass="Center">
     <asp:ImageButton ID="ImageButton1" ImageUrl="..." runat="server" />
</asp:Panel>

Or, change your CSS to work with an <input type="image"> – I think that’s as easy as just adding display: block, and the other properties will work the same as a containing <div> would.