我正在尝试创建一些并排对齐的流体图像，但也应该在中间垂直对齐，无论高度尺寸是多少，我已将图像设置为最大宽度：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;
}
Fiddle: http://jsfiddle.net/xmJ3R/
我想这就是你所要求的。
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
