居中兩張圖像，但將它們保存在單獨的行中？

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; 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-盒來實現：

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