将图像居中对齐到较小的 div 中

Question

我有一个 `

` 标签，它的宽度是 100px，高度也是 100px（就这样说吧）。 标签里面只有一张图片，并且图片的高度始终为 100px。

我想让图片水平居中显示。

在这里，有三种情况：

1. 图片的宽度等于容器的宽度，没有问题
2. 图片的宽度小于容器的宽度，可以使用 margin: auto 实现
3. 图片的宽度大于容器的宽度

我希望图片的中心部分在容器内可见。

也就是说，如果图片的宽度为 120px，而容器的宽度为 100px，并且设置了 overflow:hidden， 那么我希望看到图片的第10个像素到第110个像素（因此，图片的左侧10个像素和右侧10个像素被隐藏在容器下方）。 是否可以通过某些 CSS 属性实现这一点？ （我不知道正在加载的图像的宽度！所以我希望它是动态的。 同时希望避免使用 JavaScript 计算来查找额外的宽度量，并给出 margin-left: 等负值。）

此外，我不能将图片作为 `

` 的 `background-image`。

- SuryaPavan

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;
}

- thirtydot

---

谢谢@thirtydot！ 通过添加以下两个属性，我能够实现小图像（与div相比）的垂直居中对齐。 .imageContainer{ line-height:100px; } .imageContainer > span > img { vertical-align:middle; }:-) - SuryaPavan

很棒的答案，jsfiddle使用得很好 :D - Benji XVI