How do I center an image provided as an ASP.NET image control?

Question

The question is pretty straightforward. I have an <asp:Image> which lives in an <asp:Panel>. My goal is to provide a very basic "print preview" where either left, center, or right alignment is selected. The panel represents the full print area (a sheet of 8.5" x 11" paper) and the image inside is the area that will actually get printed. The full code is this:

<asp:Panel ID="Panel2" runat="server"
    BackColor="Black"
    BorderStyle="Inset" 
    Width="425px"
    Height="550px" >
    <asp:Image runat="server" Height="425px" ImageAlign="" />
</asp:Panel>

I set the ImageUrl property in the code behind, no problems there. If I want to align the image all the way to the left or right, I can just specify ImageAlign="[Left|Right]". However, I haven't been able to find a way to center the image in the panel. I've tried all the different ImageAlign values and none of them seem to do what I want. Am I SOL here? If I have to, I can alter the CSS class for the image or panel but I couldn't figure out anything successful with that approach either.

Answer 1

in your panel tag (which becomes a div client side) just add this attribute:

CssStyle="text-align:center;"

Though that would center EVERYTHING within that panel.

Perhaps just set the CssStyle of the image to a hardcoded left-margin? If your goal is a fixed width print preview, this should be ok.

Answer 2

Panel CSS Property: CssStyle="alignCenter"

CSS: .alignCenter { margin: 0 auto; }

Answer 3

what if you use panel HorizontalAlign="Center" property.......

<asp:Panel runat="server" ID="Panel2" HorizontalAlign="Center">
</asp:Panel>