html - vertical centering of list items -


i have read many articles vertical centering i’m afraid not many of them intuitive, hence unable apply problem. basically, have main div , in there, i’ve got unordered list has image , paragraph tag within , displayed using inline-block. aspect of work fine.

the problem or trying achieve have list centered in middle of screen. instance, if have got 1 item in list, should in middle , move upwards more items entered in list.

<div id = "main">     <ul>         <li>             <img src="test.jpg" alt="#" />             <p>lorem ipsum</p>                   </li>     </ul> </div>  #main {     margin: 60px auto;     height: 400px; }  #main ul li {     display: inline-block;     vertical-align: top;     margin: 0 13px 72px 22px;     height: 100px;   }  #main ul {      text-align: center; } 

not sure you're trying here possible solution. trick line-height.

edit: should it...

http://jsfiddle.net/cxmsr/4/

 #main {     margin-left: auto;     margin-right: auto;     position: relative;     left: 0px;     top: 0px;     height: 400px;     background-color: #999999;     display: table; } #main ul {     display: table-cell;     vertical-align: middle;     text-align: center; } #main li {     display: inline-block;     background-color: #ccc;     margin: 2px 2px 6px;     height: 100px; } 

you can change #main width 100% or whatever need.


Comments

Popular posts from this blog

php - What is the difference between $_SERVER['PATH_INFO'] and $_SERVER['ORIG_PATH_INFO']? -

fortran - Function return type mismatch -

queue - mq_receive: message too long -