css - How to center divs on page -
in fiddle : http://jsfiddle.net/h4f8h/16/
i'm attempting center 2 divs wrapping outer div , centering :
<div style="margin-left:auto;margin-right:auto;">
but divs remaining left aligned. how can center these divs on page ?
fiddle code :
html :
<div style="margin-left:auto;margin-right:auto;"> <div id="block"> <img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" /> <div style="font-size:20px;font-weight:bold;"> test </div> <div> <a href="http://www.google.com">google</a> </div> </div> <div id="block"> <img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" /> <div style="font-size:20px;font-weight:bold;"> test </div> <div> <a href="http://www.google.com">google</a> </div> </div> </div>
css :
*{ margin:0; padding:0; } #block { margin-right:100px; border-width: 2px; border-color: #4682b4; background-color: white; width: 100px; text-align: center; line-height:30px; padding:3px 0; float:left; } img{ float:left; } #block:hover { background-color: #c2dfff ; }
div
block level element default take 100% of horizontal space if not assign width
it, need assign width
container
<div style="margin-left:auto;margin-right:auto; width: 300px;">
here, can set width accordingly. avoid using inline
css.
your css lil sloppy, example margin-right:100px;
not required, also, can use shorthand like
margin: 0 auto;
= margin-left:auto; margin-right:auto;
demo (added red border show boundaries)
note: floating elements, make sure clear floats either using <div style="clear: both;"></div>
i've done in demo provided, else can use snippet below self clear parent like
.clear:after { display: table; clear: both; content: ""; }
Comments
Post a Comment