html - 在比子元素窄的父元素中水平居中子元素

Question

我一直在尝试将宽<img>元素水平居中在 a<div>中，该元素不如图像本身宽。并且<div>已经overflow: hidden开始了。

例如，图像很500px宽，DIV 很250px宽。是否有任何干净的方法（例如它适用于任何尺寸的图像）使图像居中，以便只有中心部分显示在 div 内。

Answer 1

<div class="Container">
    <img class="Thumb">
</div>

和 ：

.Container {
    position: /* anything but static */
    width: 250px;
}

.Thumb {
    position: relative;
    width: 500px;
    margin: 0 auto;
}

Answer 2

由于您期望响应行为，我建议您拥有（对于一个简单的行为）

div {
 text-align: center;
}

但是使用CSS3 和媒体查询是可能的。

查看如何在 CSS3 中创建响应式居中图像

快速演示

Answer 3

您可以使用 css 将图像添加为背景，并将背景位置设置为中心。