html - 将两个图像居中，但将它们放在不同的行中？

Question

        <div class="client-logo-wrapper">
          <a href="some link"><img class="client-logo" src="images/logo.png" alt="client-logo"></a>
          <a href="some link"><img class="contract-logo" src="images/logo.png" alt="contract-logo"></a>
        </div>

我在一个 div 中有这两个图像。我想在另一个下面显示。 display:block 对此很有帮助。但是，我也想将它们居中。为此，我想使用 flexbox；但如果有空间，则将这两张图片放在另一张图片的旁边。但我不希望这种情况发生。我希望它们彼此重叠，但像这样居中。

我该怎么做？

Answer 1

最简单的方法是使用 text-align: center 和 display: block

a {
  display: block;
  text-align: center;
}

<div class="client-logo-wrapper">
  <a href="some link"><img class="client-logo" src="images/logo.png" alt="client-logo"></a>
  <a href="some link"><img class="contract-logo" src="images/logo.png" alt="contract-logo"></a>
</div>

但是如果你想要一个 flexbox 解决方案，使用 flex-direction: column;对齐元素:居中；

.client-logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<div class="client-logo-wrapper">
  <a href="some link"><img class="client-logo" src="images/logo.png" alt="client-logo"></a>
  <a href="some link"><img class="contract-logo" src="images/logo.png" alt="contract-logo"></a>
</div>