我正在尝试(水平)居中放置一些图像,这会使容器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; }更多推荐
水平居中放置溢出容器的图像
发布评论