如何将多个项/图像放在一个div中?

I am having issues with centering these three images inside a container. I am using Bootstrap but due to some overlay content that will be added later I would like to avoid some of its grid system, and center these three images independent of that. Here's the pen to demonstrate the current state: http://codepen.io/anon/pen/yVovqW

我在一个容器内对这三幅图像进行集中处理。我使用的是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>

2 个解决方案

#1

Change the float left; for display:inline-block; in the .about__inner class and you should be good to go.

改变左浮动;显示:inline-block;在。关于内心的课上，你应该做的很好。

#2

I was gonna suggest display:flex; but after playing with the code a bit I found out that you can fix it if you just change this part of the code: DEMO

我想建议展示:flex;但是在玩了这个代码之后，我发现如果你只是修改代码的这一部分，你就可以修复它:DEMO。

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

#1