Вертикальное выравнивание в 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; 
} 

Почему в этом примере вертикальное выравнивание не работает? Можно сделать? Если да, как я могу это сделать?

живой пример:http://jsfiddle.net/gQM68/ с вашими ответы

Answer 1

текст в соответствие с относительно его высоты линии, чтобы либо вы увеличивали высоту линии, а затем применяли вертикальное выравнивание.

или

используя обивка-топ

вы можете проверить эту ссылку для справки

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

или

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

Answer 2

vertical-align property относится только к инлайн-уровня и table-cell элементы. Вы можете обойти это ограничение с помощью элемента span внутри элемента li и установки vertical-align на span, например.

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

Answer 3

Если вы заключите текст с span и установить его стиль, как показано ниже, он должен работать:

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

li span { 
    display: inline-block; 
    vertical-align: middle; 
} 

.more { 
    ... 
} 

.moretwo { 
    ... 
} 

Answer 4

вы можете использовать vertical-align с 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; 
}