Horizontally centering with "margin auto"

Problems:

We want to keep the content displayed center horizontally in one container(div, p etc).

 

 

Solution:

We can use auto margin to center the element like below.

 

<div id="container">
    <div id="center"><img src="./images/T1qjOGXaRqXXXXXXXX-72-34.png"/></div>
 </div>

 

#container{
    width:100%;
}
#center{
    margin: 0 auto;/*Put the  img at the center of "container"*/
    width:100px;
 }

 

http://www.apple.com/support/ use this way to put the header, content and footer at the center.

 

Extension:

If we want to put content at the center, but with some pixels moved to one direction, we still can use this method with relative position.

 

 

<div id="container">
    <div id="center"><img src="./images/T1qjOGXaRqXXXXXXXX-72-34.png"/></div>
 </div>

 

#container{
    width:100%;
}
#center{
    margin: 0 auto;
    width:100px;
    position:relative;
    left:-10px;/* move the position 10 pixels to the left*/
}

 

An example of this extention would be tiger log in page (our current project)

Related Patterns:

Vertically Centering With Line-Height