<分区>
css - 如何将图像保持在 div 的中心？ row text-center 和 margin-auto 不起作用
我的图片具有不同的宽度，需要让它们居中 他们各自的div。
我需要考虑所有边距——顶部、底部、左侧、右侧。它们应该位于 div 的中心而不是顶部中心。因此 class="row text-centre" 和 class="center-block" 无济于事。
我尝试更改页边距，但每张图片的宽度不同，所以无法更改。我想知道是否有任何方法可以将任何宽度的图像保留在其 div 的中心。
DEMO
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<style>
.col-md-3.img-container {
background-color: green;
height: 400px;
display: flex;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
margin-right: 2%;
}
.img-div {
-webkit-box-flex: 2;
-webkit-flex: 2;
-ms-flex: 2;
flex: 2;
//position: relative;
margin-left:20%;
margin-right:20%;
// margin:auto;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 img-container">
<div class="img-div">
<a
href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiWGXo4U6CCvNItlDYFgEQz4d3T-YjLj13nqUZ-crpAr3qMPx-"
title="" data-gallery rel="nofollow"> <img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiWGXo4U6CCvNItlDYFgEQz4d3T-YjLj13nqUZ-crpAr3qMPx-"
width="20%" class="img-thumbnail img-responsive img-adv" />
</a>
</div>
</div>
<div class="col-md-3 img-container">
<div class="img-div">
<a
href="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSqUIWjfSNC02M5Yjo-7nLBoeSJSEcOZCy0uRdF7Z8HgZRxGWB_Lg"
title="" data-gallery rel="nofollow"> <img
src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSqUIWjfSNC02M5Yjo-7nLBoeSJSEcOZCy0uRdF7Z8HgZRxGWB_Lg"
width="40%" class="img-thumbnail img-responsive img-adv" />
</a>
</div>
</div>
<div class="col-md-3 img-container">
<div class="img-div">
<a
href="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTP96P2l57b9znJ60v1gYS695LfH9K0bt8lB38Yi0McCdtq_dtC"
title="" data-gallery rel="nofollow"> <img
src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTP96P2l57b9znJ60v1gYS695LfH9K0bt8lB38Yi0McCdtq_dtC"
width="80%" class="img-thumbnail img-responsive img-adv" />
</a>
</div>
</div>
<div class="col-md-3 img-container">
<div class="img-div">
<a
href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQYUsrUfG7vmoT61NjkXL1o-Xk-I032GQI1wuZ_QIcen399srHimA"
title="" data-gallery rel="nofollow"> <img
src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQYUsrUfG7vmoT61NjkXL1o-Xk-I032GQI1wuZ_QIcen399srHimA"
width="90%" class="img-thumbnail img-responsive img-adv" />
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
我相信你的答案在这里:
http://jsfiddle.net/4wz688o1/5/
.img-div:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.img-div {
height: 400px;
-webkit-box-flex: 2;
-webkit-flex: 2;
-ms-flex: 2;
flex: 2;
position: relative;
text-align:center;
}
.img-div img {
vertical-align: middle; /* vertical alignment of the inline element */
}
本质上，img-div 需要适当的高度才能运行。
编辑:基于 Srinivas Pai fiddle 和更早的 StackOverflow 提交
关于css - 如何将图像保持在 div 的中心？ row text-center 和 margin-auto 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31745935/