ansaurus

Question

Center Div inside another (100% width) div

Answer 1

+10 A:

The below style to the inner div will center it.

margin: 0 auto;

Virat Kadaru 2009-09-14 20:12:53

Answer 2

+6 A:

.parent { text-align: center; }
.parent > .child { margin: 0 auto; width: 900px; }

geowa4 2009-09-14 20:13:07

I was missing the text-align it seems as i had the margin and wasn't working. Accepted, cheers.

Shadi Almosri 2009-09-14 20:16:35

text-align:center does not help with centering the inner div.

Vizjerai 2009-09-14 20:18:55

centers the stuff (text) inside though, resulting in the same desired outcome (if you only have text). for auto-margin to work, you also need a width on the inner div.

geowa4 2009-09-14 20:25:15

The child selector > won't work in IE6, in case you care.

ScottE 2009-09-14 20:29:49

Answer 3

+1 A:

Just add margin: 0 auto; to the inside div.

ScottE 2009-09-14 20:13:36

Answer 4

+4 A:

The key is the margin: 0 auto; on the inner div. A proof-of-concept example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
    <div style="background-color: blue; width: 100%;">
     <div style="background-color: yellow; width: 940px; margin: 0 auto;">
      Test
     </div>
    </div>
</body>
</html>

Larsenal 2009-09-14 20:15:28

This is a good answer as it's crucial to have the right doc type if you're using the margin: 0 auto technique

ScottE 2009-09-14 21:00:05

Answer 5

+2 A:

for detail info, let's say the code below will make a div aligned center:

margin-left: auto;
margin-right: auto;

or simply use:

margin: 0 auto;

but bear in mind, the above CSS code only works when you specify a fixed width (not 100%) on your html element. so the complete solution for your issue would be:

.your-inner-div {
      margin: 0 auto;
      width: 900px;
}

Khashayar 2009-09-14 21:01:19

This is a great example because you correctly explicitly point out that a width on the inner div is required.

Bill Ayakatubby 2009-10-04 16:22:56

Answer 6

A:

"margin: 0 auto; width: 900px; "

The above works - thanks

Suchet 2010-05-25 10:18:27

ansaurus

tags:

views:

answers:

Center Div inside another (100% width) div

related questions