水平居中放置溢出容器的图像

本文介绍了水平居中放置溢出容器的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试(水平)居中放置一些图像，这会使容器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; }