如何让并排的图片实现垂直居中对齐？

下面给你两种容易操作的办法，不用复杂编程，就能让每行三张的图片看起来更整齐：

方法一：用固定高度容器包裹图片（推荐，视觉最整齐） #

先把每个<img>标签放进一个容器里，再给容器设置统一高度，让图片在容器里居中显示，超出的部分自动隐藏：

修改后的HTML代码 #

<div class="img-box">
  <img src="so.jpg">
</div>
<div class="img-box">
  <img src="ch.jpg">
</div>
<div class="img-box">
  <img src="CC.jpg">
</div>
<div class="img-box">
  <img src="blue.jpg">
</div>
<div class="img-box">
  <img src="tv.jpg">
</div>
<div class="img-box">
  <img src="do.jpg">
</div>
<div class="img-box">
  <img src="bwire.jpg">
</div>
<div class="img-box">
  <img src="nail.jpg">
</div>
<div class="img-box">
  <img src="tom.jpg">
</div>

配套的CSS代码 #

把这段代码放到页面的<style>标签里（一般在<head>部分）：

.img-box {
  width: 33.33%; /* 每行刚好放3个容器 */
  height: 250px; /* 你可以自己改这个高度，比如200px、300px，看你需求 */
  float: left; /* 让容器横向排列 */
  display: flex;
  align-items: center; /* 图片垂直居中 */
  justify-content: center; /* 图片水平居中 */
  overflow: hidden; /* 超出容器的部分隐藏 */
}
.img-box img {
  max-width: 100%;
  max-height: 100%;
}

这样所有容器高度一致，图片在里面居中，视觉上就不会有高矮突兀的问题了。

方法二：统一图片高度，按比例缩放宽度 #

如果不想裁剪图片，直接给所有图片设置统一高度，宽度自动按原图比例缩放，这样图片不会变形，只是宽度可能略有不同，但高度一致，视觉差异也会小很多：

CSS代码 #

同样放到页面的<style>标签里：

img {
  height: 250px; /* 统一图片高度，自己调整数值 */
  width: auto; /* 自动按原图比例计算宽度，避免变形 */
  max-width: 33.33%; /* 限制图片最大宽度，保证每行能放3张 */
  display: inline-block;
  vertical-align: middle; /* 让图片垂直对齐 */
}

内容的提问来源于stack exchange，提问作者pucababy