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;代替浮动，你很高兴

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

 awk 'FNR==NR{A[$1]=$NF;next} {printf("%s %s\n",$1,$1 in A?A[$1]:$NF)}' b.txt a.txt