[英]How to vertically and horizontally center two images inside a div on a responsive page
我正在使用 Skeleton 和 Normalize css。 我想在 div 容器内垂直和水平地并排居中两个图像。 当页面变窄时,我想要第一张图像底部的第二张图像,如下所示
Normal width:
img1 img2
Narrow view:
img1
img2
这是我的代码:
<div id="center">
<div class="left">
<img class="u-max-full-width" src="img1.jpg">
</div>
<div class="right">
<img class="u-max-full-width" src="img2.jpg">
</div>
</div>
这是我的 css:
#center {
width: 100%;
text-align: center;
position: relative;
display: table;
}
#center > div {
display: table-cell;
vertical-align: middle;
}
.left {
width: 50%;
height: 100%;
text-align: center;
}
.right {
width: 50%;
height: 100%;
text-align: center;
}
使用此代码,它们以正常宽度垂直居中,但我无法在较窄的视图中使图像彼此对齐。 关于如何做到这一点的任何想法?
尝试这个:
.container { text-align: center; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; display: flex; justify-content: center; flex-wrap: wrap; -webkit-box-align: center; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 800px; }
<div class='container'> <img src="//placehold.it/300x300" class="thumbnail" alt=""> <img src="//placehold.it/300x300" class="thumbnail" alt=""> </div>
编辑: Sry 没有正确阅读。如果页面变窄,这些不会分解。
正如弗朗索瓦指出的那样,将其添加到 css 中:
flex-wrap: wrap;
另一个编辑:显然 IE 对此有一些问题。 围绕 .container (container_wrapper) 或其他东西做一个包装器。 给它:
display: flex; flex-direction: column; height: 100%;
并确保您的 html 和 body 设置为 100% 高度
使用 Jip van Kakerken 的代码,只需添加属性:
flex-wrap: wrap;
.container { text-align: center; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; display: flex; justify-content: center; -webkit-box-align: center; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; flex-wrap: wrap; height: 800px; }
<div class='container'> <img src="//placehold.it/300x300" class="thumbnail" alt=""> <img src="//placehold.it/300x300" class="thumbnail" alt=""> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.