CODEWITHSUNDEEP
htmlcss
Mj1992
Mj1992

Reputation: 3504

Why margin:0 auto is not aligning to center

Several times I get this problem.Whenever I try to center something using margin:0 auto. Sometimes i succeed and sometimes not. So my questions are.

  1. Why the #PostWrapper in the below example is not getting centered inside the innerWrapper.
  2. When does margin:0 auto works and when it doesn't.What are the causes.

CSS:

#container #Post{

    background:#FFFFFF;
    border-radius:10px;
    margin-top:20px;
    overflow:auto;
}

#container #Post #InnerWrapper{
        margin:10px;
}

#container #Post #InnerWrapper #SubjectWrapper{
    overflow:auto;
}

#container #Post #InnerWrapper #SubjectWrapper #SubjectText{
    font:30px "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style:italic;
    font-weight:bold;
    float:left;
}

#container #Post #InnerWrapper #SubjectWrapper #SubjectBox{
        float:left;
        margin-left:2px;
}

#container #Post #InnerWrapper #PostWrapper{
     margin:0 auto;
     border:3px solid #000;
     display:inline-block;
}

#container #Post #InnerWrapper #PostWrapper #PostText{
     font:30px "Palatino Linotype", "Book Antiqua", Palatino, serif;
     font-style:italic;
     font-weight:bold;
}

#container #Post #InnerWrapper #PostWrapper #PostBox{
}

HTML:

    <div id="Post">
     <div id="InnerWrapper">
    <div id="SubjectWrapper">
           <div id="SubjectText">Subject:</div>
               <div id="SubjectBox"><input type="text" class="text_box" /></div>
           </div>

        <div id="PostWrapper">
           <div id="PostText"><?php if($PageType=='and'){ echo 'Add new Deal:';}else{ echo 'Edit Company History:';}?></div>

           <div id="PostBox"><textarea rows="20" cols="103" id="PostEditor" /></div>
       </div>
    </div>

Upvotes: 2

Views: 4915

Answers (5)

Shomz
Shomz

Reputation: 37711

In short: It depends on the position, width and display attributes of elements. Try putting position: relative; to them and also set their width.

Child divs always have a 100% width which makes centering useless, so defining width and position makes use of it. Also, you can't use display: inline-block, but display: block.

EDIT

Here is the code sample of your div using margin: auto: http://jsfiddle.net/vnAvk/

And here is with the inside elements also centerer (I think that's what you're after): http://jsfiddle.net/vnAvk/1/

And here's with the whole thing centered: http://jsfiddle.net/vnAvk/2/

Upvotes: 1

Minja
Minja

Reputation: 786

From what I've gathered, you may want to set a width on the parent container div because if there is no width set, it defaults to 100% for divs. Obviously, you can't "center" a div that takes up 100% of the screen, so that should be something you try.

Upvotes: 1

Starx
Starx

Reputation: 79049

The problem is ambiguous selector, the selector chain you provided is invalid. Just use

#PostWrapper{
     margin:0 auto;
     border:3px solid #000;
     display:inline-block;
}

Demo

Upvotes: 1

albert
albert

Reputation: 8153

for two reasons: you need to clear the floating elements above it, and you have it set to display:inline-block; if you clear your floats and remove inline-block, it aligns in the center. you can check it out here: http://jsfiddle.net/jalbertbowdenii/pQhjJ/1/

Upvotes: 1

Yehonatan
Yehonatan

Reputation: 3225

Use this:

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

And if it still dosent work than add this:

text-align:center;

Update 1:Well, while checking your styling on chrome developer tools I saw that the browser not recognizing your style refrencing so maybe the problem is on your item selecting

Update 2: Try this - 

 #container, #Post{

    background:#FFFFFF;
    border-radius:10px;
    margin-top:20px;
    overflow:auto;
}

#container, #Post, #InnerWrapper{
        margin:10px;
}

#container, #Post, #InnerWrapper, #SubjectWrapper{
    overflow:auto;
}

#container, #Post, #InnerWrapper, #SubjectWrapper, #SubjectText{
    font:30px "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style:italic;
    font-weight:bold;
    float:left;
}

#container, #Post, #InnerWrapper, #SubjectWrapper, #SubjectBox{
        float:left;
        margin-left:2px;
}

#container, #Post, #InnerWrapper, #PostWrapper{
     margin-left:auto;
     margin-right:auto;
     border:3px solid #000;
     display:inline-block;
}

#container, #Post, #InnerWrapper, #PostWrapper, #PostText{
     font:30px "Palatino Linotype", "Book Antiqua", Palatino, serif;
     font-style:italic;
     font-weight:bold;
}

Upvotes: -2

Related Questions