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上（没有单独的样式表）。

Answer 1

将此添加到CSS样式中。

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

修改

从IlyaStreltsyn的输入中，我同意clearing right与display:block的关系，以使图像居中。

对于实例，

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

Answer 2

添加display: block;

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

<强> DEMO

Answer 3

内联块（如内联，默认情况下是图像）参与内联格式化上下文，而不是块格式化上下文。这就是为什么他们不遵守margin:auto（对他们有效地意味着margin: 0），但是要遵守他们祖先块元素的text-align。

Answer 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

4 个答案: