html - 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; 而不是 float 就可以了

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