Как разместить эти три блока по горизонтали?

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 } 

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

Answer 1

сначала удалить float:left

Затем используйте display:inline-block и margin:auto

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

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

Answer 2

Отличный случай использования для Flexbox здесь, просто добавьте это, и он будет работать:

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

Лучшая часть является то, что вы можете даже удалить float:left; от .wrapper2, и он будет работать отлично, поэтому вы тоже сохраняете код :)

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

Answer 3

float:left Удалить из .wrapper2 и добавить display:inline-block

.wrapper2 { 
display:inline-block; 
} 

Вот Demo

Answer 4

Или ... Вы можете удалить .wrapper2 полностью его ненужный ... Вот codepen для вас ... Использование display: flex;

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