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;但如果有空间，那么两个图像将 next 放到另一个。但我不希望这种情况发生。我希望他们在彼此之上，但是，这样的中心。

我怎么能这样做？

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

Answer 2

您可以使用此css代码来实现您的目标：

.client-logo-wrapper {
    width: 100%;
    display: block;
    }
.client-logo-wrapper img {
    margin: 0 auto;
    display: block;
    }

Answer 3

可以使用flex-box实现：

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

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

<div class="client-logo-wrapper">
          <a href="some link"><img class="client-logo" src="http://lorempixel.com/400/200/people/1/" alt="client-logo"></a>
          <a href="some link"><img class="contract-logo" src="http://lorempixel.com/400/200/people/2/" alt="contract-logo"></a>
        </div>

将两个图像居中，但将它们分开存放？

3 个答案: