Center child divs inside parent div

Question

I have a parent div that must stay at 100% with 3 child divs inside. I need to center the 3 child divs, but don't know how.

.parent {     width: 100%;         border: 1px solid blue; }      .child {     float: left;         border: 1px solid red;     margin: 2px; }

<div class="parent">     <div class="child">child1</div>     <div class="child">child2 - center us child divs! :)</div>     <div class="child">child3</div>     <div style="clear: both"></div> </div>

Here is a JSFIddle:

http://jsfiddle.net/qdHH3/2/

Answer 1

Try using display: inline-block and text-align: center

.parent {     width: 100%;     border: 1px solid blue;     text-align: center; }  .child {     display: inline-block;       border: 1px solid red;     margin: 2px; } 

jsFiddle: http://jsfiddle.net/qdHH3/3/