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

为什么在此示例中，vertical align不起作用？有可能吗？如果是，我该怎么做呢？

实时示例： http://jsfiddle.net/gQM68/与您的答案

Answer 1

文本与其行高相对齐，因此要么通过增加行高，然后应用垂直对齐

或

使用padding-top

您可以查看此链接以供参考

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

Answer 3

vertical-align property仅适用于内联级和table-cell元素。您可以使用span元素中的li元素并在vertical-align上设置span来解决此限制，例如

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

Answer 4

如果您使用span包围文本并将其样式设置为如下所示，那么它应该有效：

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

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

.more {
  ...
}

.moretwo {
  ...
}

UL LI中的垂直对齐？

4 个答案: