水平图像对齐CSS

Question

我在对齐主图像方面遇到了一些问题。它应该水平居中对齐，但总是乱七八糟的。页面可以在这里找到 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;
}

这就是我应用到图片上的基本CSS样式，所有源代码都在主页index.html文件中（没有单独的样式表）。

- Brad Adams

---

添加 width 属性，它就会正常工作。 - slash197

抱歉，但不再与该域名相关联，链接可能无法正常工作。 - Brad Adams

Answer 1

将以下内容添加到您的CSS样式中。

img.displayed {
    display: table-caption;
    margin: 0 auto;
}

编辑

根据IlyaStreltsyn的输入，我同意使用display:block来使图片居中并清除 right。

例如：

img.displayed {
    display: block;
    margin: 0 auto;
    clear: right;
}

- Nitesh

---

Why display:table-caption;? - Dom

那么为什么不像其他人建议的那样使用 display:block; 呢？它显然不是表格标题。 - Dom

由于右浮动的 p 元素设置了 height: 150px，因此 display: block 属性无法对齐图像。添加 clear: right 属性后，它将使用 margin: auto 居中显示图像（正如计划的那样），并且不需要在图像上方使用不语义化的 <br> 标签。我认为这比使用具有相当非直观副作用的奇特 table-* 属性来解决问题更好。 - Ilya Streltsyn

谢谢@NathanLee，非常有效！我最终使用了以下代码：`img.displayed { display: block; margin: 0 auto; clear: right;}` - Brad Adams

1. Display:block - 将图像显示从内联块转换为块级元素。Div是块级元素。
2. margin:0 auto - 居中显示块。
3. Clear:right - 右浮动阻止了块的居中显示，需要清除。

我希望现在你明白了。- @BradAdams - Nitesh

Answer 2

添加 display: block;

img.displayed{
    display: block;
    margin:0 auto;
}

DEMO

- Sowmya

---

不起作用。您必须添加 clear:right; 以解决他的问题。 - Nitesh

Answer 3

内联块（默认情况下为图像）参与内联格式化上下文，而不是块格式化上下文。这就是为什么它们不遵循margin:auto（对它们来说实际上意味着margin:0），但确实遵循其祖先块元素的text-align的原因。

- Ilya Streltsyn

Answer 4

查看使用 CSS 和代码的这里的 Fiddle。

#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>

- Swarnamayee Mallia

---

为什么不通过CSS设置width，height和border，而是在行内设置？ - Dom