Question

我试图水平居中三个链接图像。以下是我到目前为止所尝试的内容。我将图像水平对齐，但我无法弄清楚如何将三个图像移动到中心。

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>

CSS

body { background:#000 }
a { display:block }
img { width:150px }
.wrapper2 { float:left }
.outer-wrapper { text-align:center }

小提琴：https://jsfiddle.net/3hw11mgs/

Answer 1

这里使用Flexbox的一个很好的例子，只需添加它就可以了：

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

最棒的是，您甚至可以从float:left;中删除.wrapper2，它也能完美运行，因此您也可以保存代码：）

小提琴：https://jsfiddle.net/3hw11mgs/3/

Answer 2

首先删除float:left

然后使用display:inline-block和margin:auto

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

https://jsfiddle.net/3hw11mgs/1/

Answer 3

从float:left移除.wrapper2并添加display:inline-block

.wrapper2 { 
 display:inline-block;
}

这是Demo

Answer 4

或者......您可以完全删除.wrapper2不需要的内容...... 这是一个代码为您...使用display: flex;

http://codepen.io/Ballard/pen/mAdvgx

如何将这三个块水平居中？

4 个答案: