我正在尝试创建一些并排排列的流体图像,但无论高度尺寸如何,我都应该在中间垂直对齐,我将图像设置为最大宽度:100%因此,他们保持在他们的父母最大宽度,所以我可以减小这些尺寸在较小的屏幕宽度。然而,我的问题是,我不确定垂直对齐这些图像的最佳方法,有人可以提出建议吗?
CSS
.img-ctn {
display: inline-block;
margin-right: 3%;
max-width: 120px;
background: #cecece;
}
.img-ctn > img {
display: block;
height: auto;
max-width: 100%;
min-width: 100%;
vertical-align: middle;
}
答案 0 :(得分:7)
我认为这就是你所要求的。
.container > div {
display: inline;
}
.container img {
max-width: 100%;
vertical-align: middle;
}
<div class="container">
<div>
<img src="http://lorempixel.com/100/75/" />
</div>
<div>
<img src="http://lorempixel.com/100/175/" />
</div>
<div>
<img src="http://lorempixel.com/100/25/" />
</div>
<div>
<img src="http://lorempixel.com/150/125/" />
</div>
</div>
并使用您的代码。
* {
padding: 0;
margin: 0;
}
body {
padding: 20px;
}
.ctn {
width: 100%;
text-align: center;
}
.img-ctn {
display: inline;
margin-right: 3%;
max-width: 120px;
background: #cecece;
font-size: 0;
}
.img-ctn > img {
max-width: 100%;
vertical-align: middle;
}
<div class="ctn">
<p class="img-ctn">
<img src="http://dummyimage.com/80x65/000/fff" alt="" />
</p>
<p class="img-ctn">
<img src="http://dummyimage.com/100x30/000/fff" alt="" />
</p>
<p class="img-ctn">
<img src="http://dummyimage.com/70x10/000/fff" alt="" />
</p>
<p class="img-ctn">
<img src="http://dummyimage.com/30x40/000/fff" alt="" />
</p>
<p class="img-ctn">
<img src="http://dummyimage.com/50x65/000/fff" alt="" />
</p>
</div>
答案 1 :(得分:1)
尝试将display:table-cell;
应用于图片包装器,然后设置padding:3%;
而不是保证金:
<强>演示强>: http://jsfiddle.net/xmJ3R/
.img-ctn {
display: table-cell;
max-width: 120px;
background: #cecece;
vertical-align:middle;
padding:3%;
}
或在里面的图像上设置边距。