Centering a div inside of another div

Question

I have a simple layout that consists of a #container with

#container {
    width: 775px;
    margin: 0 auto; 
}

to center it on the page with a maximum width of 775px

Then inside of that I have another div whose width varies depending on the content inside of it

.innerdiv { margin: 0 auto; }

I want it so if the .innerdiv is less than 775px, it will center within that 775px region.

The problem is that the above code is not working. I've wrestled with it for a bit but can't figure out what I need to do to accomplish this.

http://stackoverflow.com/questions/114543/how-to-center-div-in-div try this — FoRever_Zambia, Nov 18 '11 at 07:31

score 2 · Answer 1 · edited May 23 '17 at 12:11

2

Using “margin: 0 auto;” in Internet Explorer 8

...“margin: 0 auto” centers a block, but only when width of the block is set to be less that width of parent.

edited May 23 '17 at 12:11

Community

1
1

answered Nov 18 '11 at 07:31

Michał Powaga

22,561
8
51
62

score 1 · Answer 2 · answered Nov 18 '11 at 07:47

1

To align a div to center.. use margin: 0 auto; but you must specify the width attribute of the . width: 400px; that must be less than the parent container <div>

for more information follow this link Link

answered Nov 18 '11 at 07:47

Niranjan Singh

18,017
2
42
75

score 0 · Accepted Answer · answered Nov 18 '11 at 07:32

0

write like this:

#container {
    width: 775px;
    margin: 0 auto; 
    text-align:center;
}
.innerdiv {
    display:inline-block;
    *display:inline /* IE */
    *zoom:1;/* IE */
    text-align:left;
}

Check this

http://jsfiddle.net/efEgq/

answered Nov 18 '11 at 07:32

sandeep

91,313
23
137
155

ah, yes this works great! I didn't realize text-align worked that way, I always thought it was just the workaround to get divs centered correctly in older IE versions – jchmski Nov 18 '11 at 07:45

score 0 · Answer 4 · answered Nov 18 '11 at 07:32

0

Give relative position to #container

#container {
    width: 775px;
    margin: 0 auto; 
    position:relative;
}

try this.

answered Nov 18 '11 at 07:32

Rohan Patil

2,328
1
16
23

score -6 · Answer 5 · edited Nov 18 '11 at 07:36

-6

Just write align="center" for innerdiv.

edited Nov 18 '11 at 07:36

Nightfirecat

11,432
6
35
51

answered Nov 18 '11 at 07:32

ravikumar

1

Centering a div inside of another div

5 Answers5

http://jsfiddle.net/efEgq/