5

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/

<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).

4

4 回答 4

7

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

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

编辑

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

例如，

img.displayed {
    display: block;
    margin: 0 auto;
    clear: right;
}
于 2013-07-09T10:54:59.860 回答
5

添加display: block;

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

演示

于 2013-07-09T10:53:52.747 回答
2

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

于 2013-07-09T10:59:28.677 回答
0

在这里用 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>
于 2013-07-09T11:06:22.563 回答