Html UL LI中的垂直对齐？ aaa aaa aaa .更多{ 背景色：红色； 高度：50px； 垂直对齐：中间对齐； } moretwo先生{ 背景颜色：绿色； 高度：50px； 垂直对齐：次对齐； }

为什么在本例中垂直对齐不起作用？ 有可能吗？如果是，我怎么做

实例：对于您的答案

仅适用于内联级别和

表格单元格

元素。您可以通过在

li

元素中使用

span

元素并在

span

上设置

垂直对齐来解决此限制，例如

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

aaa
如果用
span
环绕文本，并将其样式设置为如下所示，则应能正常工作：

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


aaa
...

李斯潘{
显示：内联块；
垂直对齐：中间对齐；
}
.更多{
...
}
moretwo先生{
...
}
您可以将
垂直对齐
与
显示：表格单元格

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

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

.more {
  ...
}

.moretwo {
  ...
}

文本相对于其行高对齐，因此您可以先增加行高，然后应用垂直对齐

或

使用填充顶

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


或

最简单的方法是：
aaa
适合我（FF3）。您正在使用哪个浏览器？这将永远不会垂直对齐任何内容。我没有投反对票，但如果我投了，这将是一个。必须阅读以下内容：为什么要使用
sub
使用
垂直对齐：bottom
，以及为什么要使用
span
？？看见
.more {
  background-color: red;
  height: 50px;
  display:table-cell;
  vertical-align:middle;
}

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