Question

我有以下HTML代码：

    <div id="inner">
    <div id="wrap">
      <img src="images/thumb/3.jpeg"/> 
      </div>
 </div>

以下样式适用于它：

body{

    background:url(pattern/pattern1.png);
}
#inner{
    margin:0 auto;
    position:relative;
    height:400px;
    width:400px;
    background:#669;
    text-align:center;
}

#wrap{

    width:50%;

    margin:0 auto;

}

问题是它始终保持在内部div中心的图像，但我希望它在包裹的中心

！------------------------------------------- ------------------------------- 仍然是同样的问题，并且继承了jsfiddle中的代码：http://jsfiddle.net/RNhvz/

Answer 1

您的margin: 0 auto是您问题的一部分。

您知道图像的高度吗？我认为它低于400px。将0样式中的margin更改为400与图像高度之差的一半。

例如，如果您的图片高度为200像素，请将margin样式更改为：

margin: 100px auto

（400 - 200）/ 2 = 100

Answer 2

您应该直接将边距应用于图像元素：JSFiddle example1

Answer 3

如果您的#inner总是有400px的高度，那么只需使用以下代码：

#inner{
    /* Your code: */
    margin:0 auto;
    position:relative;
    height:400px;
    width:400px;
    background:#669;
    text-align:center;

    /* Solution part I. */
    line-height: 400px;
}

/* Solution part II. */
img {
    margin: 0 auto;
    vertical-align: middle; 
}

这样，图像将在垂直和水平方向上居中，而且 - 更重要的是 - 此解决方案并不需要您知道图像大小。你不需要#wrap div。您可以保留HTML语法，但不需要此元素的宽度和边距规则。

以下是工作代码：http://tinkerbin.com/YOjVvnVZ。

另一个div图像中心的Css div

3 个答案: