How to center align content in a DIV tag

Question

I have two div tags:

<div id="parent">
    <div id="content">
          //content
    </div>
</div>

the content of the <div id="content"> is added dynamically so I don't know its width and I can't set width and margin to it.

How can I center align <div id="parent"> content?

PS: I don't want to use javascript to do this.

Yeah, centering stuff with CSS – that’s totally a new question, has _never_ been asked before … — CBroe, Nov 04 '13 at 12:50
Centering div with unknown width http://stackoverflow.com/questions/8228536/centering-div-with-unknown-width — 0xAli, Nov 04 '13 at 12:56
possible duplicate of [How to center a div in a div - horizontally?](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally) — They call me Trinity, Nov 04 '13 at 13:00

score 11 · Accepted Answer · answered Nov 04 '13 at 12:49

11

Try this:

#parent {
   text-align: center;
}

#content {
   display: inline-block;
}

answered Nov 04 '13 at 12:49

Charles Ingalls

score 1 · Answer 2 · answered Nov 04 '13 at 12:50

1

You can use text-align property.

#parent {
 text-align: center;
}

answered Nov 04 '13 at 12:50

Praveen

center-aligning parent won't help as the content div width is not proper – Ashkan Mobayen Khiabani Nov 04 '13 at 12:51
@AshkanMobayenKhiabani check the other post which is using display: inline-block. – Mr_Green Nov 04 '13 at 12:52

2 Answers2