Question

我有一个宽度为460px的div。 div的背景是黑色的。它包含一个宽度为400px的图像。

我需要将图像居中在div中，而不会在图像下方留出额外的空间。我可以通过将图像显示为块来移除空间，但它使图像显示不在中心位置。

这是jsfillde演示：

这是代码

<div class="img-holder"> 
    <img src="myimage.jpg" />        
</div>

div.img-holder {
    width: 460px;
    background-color: black;
    text-align: center;
}

我正在寻找一个CSS解决方案。 div的显示属性必须是块，它不能浮动。

谢谢和问候。

Answer 1

将margin: auto设置为阻止

时，请使用{{1}}

http://jsfiddle.net/g43Pp/1/

Answer 2

你需要玩边距：

.img-holder {
    width: 460px;
    background-color: black;
}
img {
    margin: 0 auto;
    display: block;
}

Answer 3

将此添加到您已经拥有的内容中。

.img-holder img {
    display:block;
    margin:0 auto;
}

Answer 4

尝试更改底部边距的值，因此，您不必将其设为block元素。

Updated Fiddle

如何使图像在较大的容器中居中而不会在其下方留出额外的空间？

4 个答案: