2009-08-06 5 views
3

Die Frage ist ziemlich einfach. Ich habe eine <asp:Image>, die in einer <asp:Panel> lebt. Mein Ziel ist es, eine sehr einfache "Druckvorschau" zu erstellen, bei der entweder die linke, mittlere oder rechte Ausrichtung ausgewählt wird. Das Panel repräsentiert den gesamten Druckbereich (ein Blatt Papier von 8,5 "x 11") und das Bild im Inneren ist der Bereich, der tatsächlich gedruckt wird. Der vollständige Code ist dies:Wie zentriere ich ein Bild, das als ASP.NET-Bildkontrolle bereitgestellt wird?

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

ich die ImageUrl Eigenschaft in der Code-behind, gibt es keine Probleme. Wenn ich das Bild ganz nach links oder rechts ausrichten möchte, kann ich einfach ImageAlign="[Left|Right]" angeben. Allerdings konnte ich keinen Weg finden, Center das Bild im Panel. Ich habe alle verschiedenen ImageAlign-Werte ausprobiert und keiner von ihnen scheint zu tun, was ich will. Bin ich hier SOL? Wenn ich muss, kann ich die CSS-Klasse für das Bild oder Panel ändern, aber ich konnte auch mit diesem Ansatz nichts erreichen.

Antwort

5

was, wenn Sie Panel verwenden Horizontalalign = "center" Eigentum .......

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

in Ihrem Panel-Tag (die einen div Client-Seite wird) fügen Sie einfach dieses Attribut:

CssStyle="text-align:center;" 

Obwohl das alles innerhalb dieser Platte zentriert würde.

Vielleicht setzen Sie einfach den CssStyle des Bildes auf einen hartcodierten linken Rand? Wenn Ihr Ziel eine Druckvorschau mit fester Breite ist, sollte dies in Ordnung sein.

+0

Wird dieses Bild bei der Angabe von ImageAlign als links oder rechts angezeigt? –

+0

Nur ein Weg, um es herauszufinden;) ... Ich würde denken, dass Sie die ImageAlign-Property einfach rauslassen würden. –

0

Panel-CSS Eigentum:

CssStyle="alignCenter" 

CSS:

.alignCenter 
{ 
    margin: 0 auto; 
} 
0

Sie Sie können dazu entweder ein Inline-Stylesheet oder ein externes Stylesheet verwenden und Ihren CSS-Code darin einfügen

+0

Bitte geben Sie den css-Code an. –

Verwandte Themen