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

更改float left;课程中display:inline-block;的{{1}}，你应该好好去。

Answer 2

我会建议display:flex;但是在使用代码之后我发现如果您只是更改代码的这一部分就可以修复它： DEMO

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

如何将div中的多个项目/图像居中

2 个答案: