CSS對齊項目彼此相鄰的心

Question

我有以下幾點：

HTML

<div class="img-container"> 
    <div class="google"> 
     <a href="path to app on play store"><img class="google-img" 
      src="images/google-play-badge.png"></a> 
    </div> 

    <div class="apple"> 
     <a href="path to app on apple store"><img class="apple-img" 
      src="images/Download_on_the_App_Store_Badge_US-UK_135x40.svg"></a> 
    </div> 

    <div class="web"> 
     <a href="www/index.html"><img class="web-img" 
      src="images/view-on-web.svg"></a> 
    </div> 
</div> 

CSS

.img-container { 
    text-align: center; 
} 

.img-container .apple, .img-container .google, .img-container .web { 
    float: left; 
    padding: 10px; 
    padding-left: 20px; 
} 

.img-container .google { 
    padding-top: 4px; 
    padding-left: 0px; 
    padding-right: 0px; 
} 

正如你所看到的，我做了一個float: left;，這樣3個項目排列在一起。我也嘗試text-align: center;，嘗試中心項目，但它沒有效果。

問題

如何保持3項一字排開彼此相鄰，並在頁面居中？

感謝

Answer 1

使用display:inline-block;而不是浮動，你是好去

.img-container { 
 
    text-align: center; 
 
} 
 

 
.img-container .apple, 
 
.img-container .google, 
 
.img-container .web { 
 
    display:inline-block; 
 
    padding: 10px; 
 
    padding-left: 20px; 
 
} 
 

 
.img-container .google { 
 
    padding-top: 4px; 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
}

<div class="img-container"> 
 
    <div class="google"> 
 
    <a href="path to app on play store"><img class="google-img" src="images/google-play-badge.png"></a> 
 
    </div> 
 

 
    <div class="apple"> 
 
    <a href="path to app on apple store"><img class="apple-img" src="images/Download_on_the_App_Store_Badge_US-UK_135x40.svg"></a> 
 
    </div> 
 

 
    <div class="web"> 
 
    <a href="www/index.html"><img class="web-img" src="images/view-on-web.svg"></a> 
 
    </div> 
 
</div>

Answer 2

另一種方式來做到這一點是在父使用flex，然後justify-content: center到中心內容水平。然後，您可以使用其他彈性屬性，例如align-items來垂直對齊。

.img-container { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.img-container .apple, 
 
.img-container .google, 
 
.img-container .web { 
 
    padding: 10px; 
 
    padding-left: 20px; 
 
} 
 

 
.img-container .google { 
 
    padding-top: 4px; 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
}

<div class="img-container"> 
 
    <div class="google"> 
 
    <a href="path to app on play store"><img class="google-img" src="images/google-play-badge.png"></a> 
 
    </div> 
 

 
    <div class="apple"> 
 
    <a href="path to app on apple store"><img class="apple-img" src="images/Download_on_the_App_Store_Badge_US-UK_135x40.svg"></a> 
 
    </div> 
 

 
    <div class="web"> 
 
    <a href="www/index.html"><img class="web-img" src="images/view-on-web.svg"></a> 
 
    </div> 
 
</div>