将应用它的块居中显示内联块

Question

我有一个div，其中包含一个img，现在我将它居中，但如果我尝试margin: 0 auto它就不起作用。

<div style="display: inline-block">

   <img src=""/>

</div>

如何将整个div（包括img？

）居中

Answer 1

将text-align: center添加到div的容器中：

<div style="text-align: center">
    <div style="display: inline-block">
       <img src="..."/>
    </div>
</div>​

<强> DEMO

Answer 2

将text-align: center提供给内联块div的父级

请参阅fiddle

也许您已经知道，但请注意，这不会在任何地方都有效，因为IE＆lt; 8不会将display: inline-block应用于您的<div>元素（并且没有任何黑客可以帮助您）：来自{{ 3}}

  

IE 6/7仅接受具有自然显示的元素的值：inline。

所以我建议使用另一个元素（如简单的内联<span>），或者，如果你使用HTML5，选择一个新的可用元素：因为它们在较旧的IE浏览器中无法识别，你可以将它们设置为内联块没有问题。在这种情况下，<figure>元素可能是合适的。

Answer 3

如果你想在INLINE-BLOCK div中居中图像，那么你需要为你的img标签指定以下样式

 position:relative;  
 left: 50%;    
 margin-left: -57px; /*Negative half of the width of the image */

这是演示。 http://jsfiddle.net/5eU3Y/

但是如果你想要CENTER div本身，那么你需要分配容器text-align：center;属性。请查看此示例http://jsfiddle.net/5eU3Y/1/

但是如果你只想要这个内联div块，那么你必须知道它的宽度。 检查一下。 http://jsfiddle.net/5eU3Y/2/