css - Dynamically align on center divs inside another div with dynamically changing height -


i cant find solution problem, asking help... have 1 div changing height depending on browser window height. inside of div 5 divs 4 per line, when resize window size smaller size divs fall down on line 2, 3, etc. that´s good, these divs arent in middle of main div resized , looking for... thank you

html:

<div id="main">  <!--div1--> <div class="mosaic-block fade"> </div>  <!--div2--> <div class="mosaic-block fade"> </div>  <!--div3--> <div class="mosaic-block fade"> </div>  <!--div4--> <div class="mosaic-block fade"> </div>  <!--div5--> <div class="mosaic-block fade"> </div>  </div> <!--main--> 

css:

div#main { border: #cccccc thin solid; max width: 840px; height:600px; min-width: 210px; border: #cccccc thin solid; margin:0 auto; max-width: 840px; }  .mosaic-block { margin-bottom:50px; position: relative; float:left; margin:4px; top:50px;  overflow:hidden; width:200px; height:200px; background:#111 url(../img/progress.gif) no-repeat center center; border:1px solid #fff; -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); } 

instead of float:left; .mosaic-block, might want try display:inline-block; , adding text-align:center; main. it's bit dirty, works !

ps. might want remove max width: 840px; , doubt it's valid declaration !


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -