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...
#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
Post a Comment