Matt Ball
Matt Ball

Reputation: 359816

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

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.

Upvotes: 4

Views: 29443

Answers (4)

theITvideos
theITvideos

Reputation: 1492

you can either use inline style sheet or external style sheet to accomplish this and add your css code in it

Upvotes: 0

IrishChieftain
IrishChieftain

Reputation: 15253

Panel CSS Property:

CssStyle="alignCenter"

CSS:

.alignCenter
{
    margin: 0 auto;
}

Upvotes: 0

Muhammad Akhtar
Muhammad Akhtar

Reputation: 52241

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

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

Upvotes: 6

Neil N
Neil N

Reputation: 25258

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.

Upvotes: 2

Related Questions