水平居中放置溢出容器的图像 [英] Horizontally center images which overflows their container

问题描述

我正在尝试(水平)居中放置一些图像，这会使容器div溢出.

I am trying to center some images (horizontally) which overflows their container divs.

容器(和图像)的高度为160px，即使在较小的屏幕尺寸下，我也希望将其保持在该高度上-但图像仍保持水平居中.

The containers (and images, for that matter) have a height of 160px and I want to keep them with that height, even at smaller screen-sizes - but still keep the image horizontally centered.

我没有运气尝试过margin: 0 auto;.

我遇到了一个半解决方案，建议在容器div上使用text-align: center;，在图像本身上使用margin: 0 -100%;.但是，此解决方案似乎仅适用于基于Webkit的浏览器.

I came across an half-solution where it was suggested to use text-align: center; on the container div along with margin: 0 -100%; on the image itself. However this solution seems to only work with webkit based browsers.

例如Firefox的结果是这样的:

In eg. Firefox the result is this:

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*/
}

有什么想法吗?预先谢谢你.

Any ideas? Thank you in advance.

.

我发现将margin: 0 -100%;编辑为margin: 0 -50%;可以解决问题(在Chrome，Firefox，IE等中).但是，我认为Andrey的解决方案是可行的，因为我认为它更可能更清洁.

I found out that editing margin: 0 -100%; to margin: 0 -50%; did the trick (both in Chrome, Firefox, IE, etc). However I am going with Andrey's solution since it is more likely cleaner, I assume.

推荐答案

可能会有所帮助

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

这篇关于水平居中放置溢出容器的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！