Vertical alignment in UL LI?

Question

<ul> <li class="more">aaa</li> <li class="moretwo">aaa</li> <li class="more">aaa</li> </ul> .more { background-color: red; height: 50px; vertical-align:middle; } .moretwo { background-color: green; height: 50px; vertical-align:sub; } 

Why does vertical alignment not work in this example? Can I do it? If so, how can I do this?

DIRECT EXAMPLE: http://jsfiddle.net/gQM68/ with your answers

Answer 1

the text is aligned with its line height so that you either increase the line height and then apply vertical alignment

or

using padding-top

you can check this link for reference

http://jsfiddle.net/gQM68/2/

or

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Answer 2

you can use vertical-align with display:table-cell

 .more { background-color: red; height: 50px; display:table-cell; vertical-align:middle; } .moretwo { background-color: green; height: 50px; display:table-cell; vertical-align:sub; } 

Answer 3

The vertical-align property applies only to inline-level and table-cell elements. You can get around this limitation by using the span element inside the li element and setting vertical-align to span , for example

 <li><span class="more">aaa</span></li> 

Answer 4

If you surround the text with a span and set its style as shown below, it should work:

 <ul> <li class="more"><span>aaa</span></li> ... </ul> li span { display: inline-block; vertical-align: middle; } .more { ... } .moretwo { ... }