如何使用css在垂直中间排列图像？

Question

我有一个问题。

图像尺寸不同。

我需要安排在垂直中间。

动态更改图像链接。

我不想使用行高。

有没有最好的方法来解决这个问题？

Answer 1

您可以使用 CSS Flexbox 。让你的父母成为一个灵活的容器＆amp;在您的图片中使用align-self: center。

＆＃13;

＆＃13;

.img-holder {
  display: inline-flex;
  background: black;
}

img {
  align-self: center;
  margin: 10px;
}

＆＃13;

<div class="img-holder">
  <img src="http://placehold.it/50x50" alt="image" />
  <img src="http://placehold.it/50x60" alt="image" />
  <img src="http://placehold.it/50x70" alt="image" />
  <img src="http://placehold.it/50x30" alt="image" />
  <img src="http://placehold.it/50x20" alt="image" />
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！