CSS 如何将作为 ASP.NET 图像控件提供的图像居中?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1240102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I center an image provided as an ASP.NET image control?
提问by Matt Ball
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:Image>
住在<asp:Panel>
. 我的目标是提供一个非常基本的“打印预览”,其中选择左对齐、居中对齐或右对齐。面板代表整个打印区域(一张 8.5" x 11" 的纸),里面的图像是实际打印的区域。完整的代码是这样的:
<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 centerthe 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.
我ImageUrl
在后面的代码中设置了属性,那里没有问题。如果我想将图像一直向左或向右对齐,我可以指定ImageAlign="[Left|Right]"
. 但是,我一直没能找到一种方法来中心在面板的图像。我已经尝试了所有不同的 ImageAlign 值,但似乎没有一个符合我的要求。我在这里吗?如果必须,我可以更改图像或面板的 CSS 类,但我也无法通过该方法找出任何成功的方法。
回答by Muhammad Akhtar
what if you use panel HorizontalAlign="Center" property.......
如果您使用面板 HorizontalAlign="Center" 属性会怎样......
<asp:Panel runat="server" ID="Panel2" HorizontalAlign="Center">
</asp:Panel>
回答by Neil N
in your panel tag (which becomes a div client side) just add this attribute:
在您的面板标记(成为 div 客户端)中,只需添加此属性:
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.
也许只是将图像的 CssStyle 设置为硬编码的左边距?如果您的目标是固定宽度的打印预览,这应该没问题。
回答by IrishChieftain
Panel CSS Property:
面板 CSS 属性:
CssStyle="alignCenter"
CSS:
CSS:
.alignCenter
{
margin: 0 auto;
}
回答by theITvideos
you can either use inline style sheet or external style sheet to accomplish this and add your css code in it
您可以使用内联样式表或外部样式表来完成此操作并在其中添加您的 css 代码