无论高度和流体宽度如何，如何将所有图像在中间垂直对齐？答案

【问题标题】：How do I align images in a row all vertically aligned in the middle no matter what height and with a fluid width?无论高度和流体宽度如何，如何将所有图像在中间垂直对齐？
【发布时间】：2017-02-09 01:59:04
【问题描述】：

我正在尝试创建一些并排对齐但也应该在中间垂直对齐的流体图像，无论高度尺寸是多少，我已将图像设置为最大宽度：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;
}

小提琴： http://jsfiddle.net/xmJ3R/

【问题讨论】：

phrogz.net/css/vertical-align/index.html
我不确定这是否是您的意思，但请尝试添加.img-ctn{vertical-align:middle;}。

标签： css

【解决方案1】：

我想这就是你想要的。

.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>

【讨论】：

【解决方案2】：

尝试将display:table-cell; 应用于图像包装，然后设置padding:3%; 而不是边距：

演示： http://jsfiddle.net/xmJ3R/

.img-ctn {
    display: table-cell;
    max-width: 120px;
    background: #cecece;
    vertical-align:middle;
    padding:3%;
}

或者在里面的图片上设置边距。

【讨论】：