水平图像对齐CSS

我在对齐主图像时遇到了一些麻烦。它应该水平居中对齐，然后继续沿着整个地方。该页面可以在这里http://0034.eu/propmanager/水平图像对齐CSS

<img src="images/background-space.png" class="displayed" border="0" /> 

IMG.displayed{ 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
}

发现，基本上我已经应用到图像的CSS，所有的源代码是关于主index.html的（没有单独的样式表）。

来源

2013-07-09 Brad Adams

添加'width'属性，那么它会工作 – slash197

很抱歉，但无法与域相关的了，它的链接可能无法正常工作 –

添加display: block;

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

DEMO

来源

2013-07-09 10:53:52 Sowmya

不工作。你必须添加一个'明确的：正确的'来解决他的问题。 – Nitesh

添加到您的CSS样式。

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

EDIT

从IlyaStreltsyn的输入，我同意的clearing的right点与display:block用于图像为中心。

例如，

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

来源

2013-07-09 10:54:59 Nitesh

为什么'display：table-caption;'？ – Dom

用于对有问题的图像进行居中。 - @Dominic – Nitesh

那么为什么不按照别人的建议'display：block;'？它当然不是一个表格标题.. – Dom

内嵌块（像是刚内联，这是通过默认的图像）参与在直列式格式化内容，而不是块格式化上下文。这就是为什么他们不服从margin:auto（这实际上意味着他们的margin: 0），但服从他们的祖先块元素的text-align。

来源

2013-07-09 10:59:28

检查Fiddle here CSS和代码

#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-09 11:06:22

为什么不通过CSS而不是内联来设置'width'，'height'和'border'？ – Dom

水平图像对齐CSS

回答

相关问题