将div内的图像与响应高度垂直对齐
将div内的图像与响应高度垂直对齐
提问于 2013-08-30 00:29:12
我有下面的代码，它设置了一个容器，当浏览器调整大小时，这个容器的高度会随着宽度的变化而变化(以保持正方形的纵横比)。
HTML
<div class="responsive-container">
<div class="dummy"></div>
<div class="img-container">
<IMG HERE>
</div>
</div>CSS
.responsive-container {
position: relative;
width: 100%;
border: 1px solid black;
}
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}如何在容器内垂直对齐IMG？我所有的图像都有可变的高度，容器不能有固定的高度/线高，因为它是响应式的……请帮帮我！
回答 5
Stack Overflow用户
发布于 2013-08-30 00:37:34
使用这个css，因为您已经有了它的标记：
.img-container {
position: absolute;
top: 50%;
left: 50%;
}
.img-container > img {
margin-top:-50%;
margin-left:-50%;
}下面是一个有效的JsBin：http://jsbin.com/ihilUnI/1/edit
此解决方案仅适用于正方形图像(因为页边距的百分比顶部值取决于容器的宽度，而不是高度)。对于随机大小的图像，您可以执行以下操作：
.img-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* add browser-prefixes */
}工作JsBin解决方案：http://jsbin.com/ihilUnI/2/edit
Stack Overflow用户
发布于 2013-08-30 00:35:14
试试这个
.responsive-container{
display:table;
}
.img-container{
display:table-cell;
vertical-align: middle;
}Stack Overflow用户
发布于 2013-08-30 01:13:23
试一试
Html
<div class="responsive-container">
<div class="img-container">
<IMG HERE>
</div>
</div>CSS
.img-container {
position: absolute;
top: 0;
left: 0;
height:0;
padding-bottom:100%;
}
.img-container img {
width:100%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18516317
复制相关文章
相似问题