水平居中溢出其容器的图像

Question

我正在尝试将溢出其容器 div 的一些图像（水平）居中。

容器（和图像，就此而言）的高度为 160 像素，我想将它们保持在该高度，即使在较小的屏幕尺寸下 - 但仍保持图像水平居中。

我试过 margin: 0 auto; 但没有成功。

我遇到了一个半解决方案，建议在容器 div 上使用 text-align: center;，在图像本身上使用 margin: 0 -100%;。然而，这个解决方案似乎只适用于基于 webkit 的浏览器。

例如。 Firefox 结果是这样的：

HTML:

<div class="row-fluid">
    <div class="span6">
        <a>
            <img src="image1.jpg">
        </a>
    </div>
    <div class="span6">
        <a>
            <img src="image2.jpg">
        </a>
    </div>
</div>

CSS:

.span6{
    height: 160px;
    overflow: hidden;
    text-align: center;
    padding: 0;
}


.span6 img{
    height: 160px;
    width: auto;
    margin: 0 -100%; /*Only works for webkit based browsers*/
}

有什么想法吗？提前谢谢你。

.

编辑：

我发现将 margin: 0 -100%; 编辑为 margin: 0 -50%; 可以解决问题（在 Chrome、Firefox、IE 等中都是如此）。但是，我认为我会使用 Andrey 的解决方案，因为它更可能更清洁。

Answer 1

这可能会有帮助

.span {
    display: flex;
    align-items: center;
    justify-content: center;
}

水平居中溢出其容器的图像

Horizontally center images which overflows their container

html

css

image

center

overflow

编辑：