Horizontally centering with "margin auto"

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: