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与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;
}