水平图像对齐 CSS答案

【问题标题】：Horizontal image align CSS水平图像对齐 CSS
【发布时间】：2016-02-23 03:25:25
【问题描述】：

我在对齐主图像时遇到了一些问题。它应该水平居中对齐，但始终保持在整个位置。该页面可以在这里找到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 上（没有单独的样式表）。

【问题讨论】：

添加width 属性然后就可以了
抱歉，该域不再关联，指向该域的链接可能无法正常运行

标签： css html alignment

【解决方案1】：

将此添加到您的 CSS 样式中。

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

编辑

根据 IlyaStreltsyn 的输入，我同意 clearing 的观点，right 和 display:block 使图像居中。

例如，

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

【讨论】：

为什么是display:table-caption;？
用于使有问题的图像居中。 - @Dominic
那么为什么不像其他人建议的那样display:block;？它当然不是表格标题..
我检查了他网站上的代码，display:block; 不起作用。所以我尝试了display:table-caption; 并且成功了。
display: block 不会在此处对齐图像，因为其上方的p 与height: 150px 右浮动。添加clear: right 后，它会将图像以margin: auto 居中（正如计划的那样），并且不需要在其上方添加无意义的<br>。我相信这是比使用奇异的 table-* 属性更好的解决方案，因为它的副作用相当不直观。

【解决方案2】：

添加display: block;

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

DEMO

【讨论】：

不起作用。您必须添加“clear:right;”才能解决他的问题。

【解决方案3】：

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

【讨论】：

【解决方案4】：

使用 css 和代码检查 Fiddle here

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

【讨论】：

为什么不通过 CSS 而不是内联设置 width、height 和 border？