Center Div Tags in another Div Tag

Question

I'm trying to get a parent div tag to hold n children div tags such that they are all on the same line, yet grouped together in the center. For example:

Here the children are blue, and the parent is red.

Here are the things I've tried:

• Making blue divs display:inline to get them on the same line. Problems: doesn't display even with its width and height both set to 10px.I tried adding  , but it only was a couple pixels wide.
• Making blue divs float:left. Problems: Have to programmatically resize red parent to child contents since the divs are floated and then center in its parent to get what I want. There should be a solution that doesn't involve javascript.

Answer 1

For IE6 and IE7 compatibility you might have to add zoom:1; and *display:inline; to your child CSS

jsFiddle

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

Answer 2

<style>
.container {
  width: 100%;
  padding: 0;
  text-align: center;
  border: 1px solid red;
}

.inner {
  display: inline-block;
  margin: 0 5px;
  border: 1px solid blue;
}
</style>

<div class="container">
  <div class="inner">
    one
  </div>
  <div class="inner">
    two
  </div>
  <div class="inner">
    three
  </div>
</div>

Answer 3

Try to use display: inline-block;:

.child {
    display: inline-block;
    ...
}

http://jsfiddle.net/mupuR/

Answer 4

Stick the blue divs in a container div. Find their widths (margin and padding included) and give the container div that width. Then set the container div's margin to 0 auto, stick it in the red div and you should be fine.