Html 水平图像对齐 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17546375/
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
Horizontal image align CSS
提问by Brad Adams
I'm having some trouble aligning a main image. It should be center-aligned horizontally, yet keeps going all over the place. The page can be found here http://0034.eu/propmanager/
我在对齐主图像时遇到了一些问题。它应该水平居中对齐，但一直在整个地方移动。该页面可以在这里找到http://0034.eu/propmanager/
<img src="images/background-space.png" class="displayed" border="0" />
IMG.displayed{
display: inline-block;
margin-left: auto;
margin-right: auto;
}
That's basically the CSS I have applied to the image, all the source code is on main index.html (no separate style sheet).
这基本上是我应用于图像的 CSS，所有源代码都在主 index.html 上（没有单独的样式表）。
采纳答案by Sowmya
回答by Nitesh
Add this to your CSS style.
将此添加到您的 CSS 样式中。
img.displayed {
display: table-caption;
margin: 0 auto;
}
EDIT
编辑
From the inputs of IlyaStreltsyn, I agree with the point of clearingthe rightwith display:blockfor the image to be centered.
从IlyaStreltsyn的输入，我同意的点clearing的right与display:block用于为中心的图像。
For Instance,
例如，
img.displayed {
display: block;
margin: 0 auto;
clear: right;
}
回答by Ilya Streltsyn
Inline blocks (like just inlines, which are the images by default) participate in the inline formatting context, not the block formatting context. That's why they don't obey margin:auto(which effectively means margin: 0for them), but do obey the text-alignof their ancestor block element.
内联块（就像内联，默认情况下是图像）参与内联格式化上下文，而不是块格式化上下文。这就是为什么他们不服从margin:auto（这margin: 0对他们来说实际上意味着），而是服从text-align他们祖先块元素的 。
回答by Swarnamayee Mallia
check the Fiddle herewith css and code
#header {
text-align:center;
}
img.displayed{
display: block;
margin:0 auto;
}
<div id="header">
<img src="http://www.0034.eu/propmanager/images/background-space.png" class="displayed" border="0" width="100" height="100"/>
</div>
