CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Georgi Georgiev
Georgi Georgiev

Reputation: 1623

Div margin: auto vs align: center

I have 2 divs below each other. I want them both to be centered horizontally. The thing is that I have to use align: center for the #wrapper and margin: auto for the other. Otherwise only 1 of them is centered. If I use align-center for both, only the #wrapper is centered, if I use margin: auto for both, only the second one is centered.

Why I have to use 2 different properties to align them in the center?:

HTML:

<div class="col-sm-5 col-sm-offset-3" id="wrapper">
    <div class="row">
       <div class="col-sm-1 col-sm-offset-2" id="col1"> col1 </div>
       <div class="col-sm-1 col-sm-offset-2 " id="col2"> col2 </div>
       <div class="col-sm-1 col-sm-offset-2" id="col3"> col3 </div>
   </div>
</div>

<div id="below">
Centered div below the #wrapper div
</div>

CSS:

html, body{
    height:100%;
}
#col1{
    background-color: lime;
    border: solid 1px;
    text-align: center;
}
#col2{ 
    background-color:  aqua;
    border: solid 1px;
    text-align: center;
}
#col3{
    background-color:  lightpink;
    border: solid 1px;
    text-align: center;
}
#wrapper{
    border: solid 1px;
    height: 10%;
    width: 50%;
    align: center;
}

#below{
    border: solid 2px;
    text-align: center;
    min-height: 100%;
    width: 80%;   
    clear: both;  
    margin: auto;
}

Upvotes: 1

Views: 3058

Answers (2)

Vimal Raiyani
Vimal Raiyani

Reputation: 174

Div margin: auto vs align: center

margin: 0 auto When can you use it?
When will you need to set center align any div or any block like main parent container in this case you have to use margin: 0 auto with display: table it be will set your section center of parent section.


text-align: center When can you use it?
When will you need to set center align any Text Paragraph or Image in this case you have to use text-align: center it will be set your text-paragraph or image center of

Upvotes: 1

Larry
Larry

Reputation: 1248

align isn't a valid CSS property - it is an attribute available on the <table> element, but one that is discouraged from use: https://developer.mozilla.org/en/docs/Web/HTML/Element/table#Attributes

Using align in your CSS should have no effect.

margin: 0 auto; affects the container directly, and when the container is block-level (display: block).

text-align: center affects text, inline, and inline-block level children of a container - not the container itself.

It's important to distinguish between the two:

centering a block-level element: use margin: 0 auto;

centering text, inline, or inline-block level children: use text-align: center;

In light of that, check that #wrapper is block-level i.e. display: block. If it isn't, or it has a parent that inhibits its width, then it won't center with margin, unless you go into the display: flex world, which you shouldn't really explore until you grasp the fundamentals of block and inline-block level elements.

I've written an article explaining how to leverage the basic display properties, supplemented with interactive Codepen demos: http://fixate.it/blog/css-display-properties/

Upvotes: 3

Related Questions