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>