Css 如何水平居中这三个街区？

我试图将三个链接的图像水平居中。下面是我到目前为止所做的尝试。我将图像水平对齐，但我不知道如何将这三个图像移动到中心

HTML

<div class="outer-wrapper">
  <div class="wrapper2">
    <div class="wrapper1">
      <a href="/Chef">
        <img src="http://i.imgur.com/tWpiPid.png">
      </a>
    </div>
  </div>
  <div class="wrapper2">
    <div class="wrapper1">
      <a href="/Tactical">
        <img src="http://i.imgur.com/KQPmsBn.png">
      </a>
    </div>
  </div>
  <div class="wrapper2">
    <div class="wrapper1">
      <a href="/Tools">
        <img src="http://i.imgur.com/XNpJVu1.png">
      </a>
    </div>
  </div>
</div>

---

小提琴：

首先移除

float:left

然后使用

display:inline block

和

margin:auto

   .wrapper2 { 
      display:inline-block;
      margin:auto
    }

---

第一次删除

浮动：左

然后使用

display:inline block

和

margin:auto

   .wrapper2 { 
      display:inline-block;
      margin:auto
    }

---

这里是Flexbox的一个很好的使用案例，只需添加以下内容即可：

.outer-wrapper { display:flex;justify-content:center; }

最好的部分是，您甚至可以删除

float:left.wrapper2

中选择code>，它将完美工作，因此您也在保存代码：）

---

Fiddle:

这里是Flexbox的一个很好的使用案例，只需添加此项，它就会工作：

.outer-wrapper { display:flex;justify-content:center; }

最好的部分是，您甚至可以删除

float:left.wrapper2

中选择code>，它将完美工作，因此您也在保存代码：）

---

从

.wrapper2

中删除

float:left

并添加

显示：内联块

.wrapper2 { 
 display:inline-block;
}

---

下面是从

.wrapper2

中删除

浮点：左
，并添加
显示：内联块

.wrapper2 { 
 display:inline-block;
}

这里是
或。。。您可以完全删除
.wrapper2
它不需要的。。。
这是给你的密码笔。。。使用
显示：flex

或。。。您可以完全删除
.wrapper2
它不需要的。。。
这是给你的密码笔。。。使用
显示：flex