CSS align an element center within a div

Assume:

<div id="outer" style="width:100%"> <div id="inner">Foo foo</div> </div>

There are few ways to achieve it:

#outer { width: 100%; text-align: center; } #inner { display: inline-block; }

OR


#inner { width: 50%; margin: 0 auto; }

OR IE8


#inner { display: table; margin: 0 auto; }

OR


.centered { position: fixed; left: 50%; margin-left: -100px; }

OR Css 3 (note that IE not support CSS3 fully)


#outer{ width:100%; /* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center; /* Safari and Chrome */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; /* W3C */ display:box; box-pack:center; box-align:center; } #inner{ width:50%; }

For more reference:

http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally

By Keenlio, April 14, 2014

What do you think?

Leave a Reply

Your email address will not be published. Required fields are marked *


7 × = seven

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>