nexprograms

I think it cannot be done by css nakedly, but can be done using some trick by using some css class. Set css class to every next 3 alphabet li. <style type="text/css"> ul { list-style: none; } li { float: left; width: 20px; text-align: center; margin-left: 2px; } .down { clear: both; } </style> <ul> <li>A</li> <li>B</li> <li>C</li> <li class="down">D</li> <li>E</li> <li>F</li> <li class="down">G</li> <li>H</li> <li>I</li> <li class="down">J</li> <li>K</li> <li>L</li> <li class="down">M</li> <li>N</li> <li>O</li> </ul>

Hi.. I found the solution:- When a div being float styled, vertical-align will not work. To solve this problem, we need to add inner div for every div. Then set the inner div to style width, height, vertical-align, and display as write below. <div style="float:left;width:50px;height:50px;text-align:center;"><div style="width:50px;height:50px;vertical-align: middle;display:table-cell;">hello</div></div>