J82 J82 - 3 months ago 6
CSS Question

How do I center these three blocks horizontally?

I'm trying to center three linked images horizontally. Below is what I've tried so far. I got the images aligned horizontally, but I can't figure out how to move all three to the center.

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

first remove float:left

Then use display:inline-blockand margin:auto

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

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