css - 如何在一个 div 中居中放置多个元素/图像

Question

我在将这三个图像置于容器中时遇到问题。我正在使用 Bootstrap，但由于稍后将添加一些覆盖内容，我想避免使用它的一些网格系统，并将这三个图像置于中心独立于此。这是演示当前状态的笔:http://codepen.io/anon/pen/yVovqW

.container {
    background-color: lightgreen;
}

.images {
    padding: 10px;
}

.about__images {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    //margin-top: 60px;
}

.about__inner img {
    max-width: 100%;
    //margin-right: 20px;
}

.about__inner {
    margin-right: 20px;
    position: relative;
    width: 250px;
    float: left;
}

<div class="container images">
  <div class="about__images">
    <div class="about__inner">
      <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="">

    </div>
    <div class="about__inner">
      <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="">

    </div>
    <div class="about__inner">
      <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt="">

    </div>
  </div>
</div>

Answer 1

在 .about__inner 类中为 display:inline-block; 更改 float left;，你应该可以开始了。