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

        <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；但是如果有空间，则将两个图像紧挨着放置。但我不希望这种情况发生。我希望他们彼此叠放，但是居中像这样。

我该怎么办？

最佳答案

最简单的方法是将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; align-items: center;

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

关于html - 将两个图像居中，但将它们放在单独的行中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44289700/