Question

我有一个width:100px和height:100px的div（比方说）在其中，只有一个图像，其高度始终固定为100px。

我想让图像水平居中。

这里有3个案例：

图片的宽度等于div的宽度，没有问题
图片的宽度小于div的宽度，我可以在这里使用margin: auto
图片的宽度超过div的宽度

我希望图像的中心部分在div内可见。

表示，如果图片的宽度为120px且div的宽度为100px且overflow:hidden 我希望图像的第10个px到第110个px可见（因此，图像的left: 10px和right: 10px隐藏在div下面）

这可以通过一些CSS属性吗？ （我不知道正在加载的图像的宽度！所以我希望它是动态的。还想避免javascript端计算找到额外的宽度并给出margin-left: -ve value bla bla ..）

另外，我无法将图像作为background-image提供给div！

Answer 1

请参阅： http://jsfiddle.net/thirtydot/x62nV/（和without overflow: hidden轻松查看居中情况）

这适用于所有浏览器，可能除了IE6。

对于.imageContainer > span，margin-left来自width，width是一个任意数字，用于控制将支持的最大图像宽度。如果需要，您可以设置width: 10000px; margin-left: -4950px;以支持真正的宽图像。

<强> HTML：

<div class="imageContainer">
    <span><img src="http://dummyimage.com/100x100/f0f/fff" /></span>
</div>

<强> CSS：

.imageContainer {
    border: 1px solid #444;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 15px;
    text-align: center;
}
.imageContainer > span {
    display: block;
    width: 1000px;
    margin-left: -450px; /* -(width-container width)/2 */
}
.imageContainer > span > img {
    display: inline-block;
}

将图像对齐到较小div内的中心

1 个答案: