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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -