Question

什么是在li中垂直居中文本的最佳方法，但是将文本限制为小于li宽度的100％ - 在这种情况下，在li上设置行高会导致包装文本具有大量行间距（当然，这是你告诉它要做的行高）：

ul li {
  height: 40px;
  line-height: 3em;
  border-bottom: 1px solid #103d3b;
  padding-left: 10px;
  font-size: 13px;
  background-image: url(images/listarrow.png);
  background-position: right center;
  background-repeat: no-repeat;
}

<ul>
    <li>test 1</li>
    <li>test 2 which is a longer line and needs wrapping</li>
</ul>

在宽度为80％且行高为1em的文本周围添加div会取消li上的行高，并将（现在正确包装的）文本发送到li框的顶部。

我想要做的是让文本块垂直居中，具有正常的行高，无论文本是否包装。

有什么想法吗？

我所针对的唯一浏览器是Mobile Safari（iPhone，iPad等），所以我可以使用仅适用于Safari的解决方案，如果这是唯一的方法。我不想在Javascript中这样做，因为这对大型列表非常不利。

此致

武

Answer 1

这可能有点过于简单，但为什么不删除li上的高度并使用填充来完成所有事情？

ul li {
  line-height: 1.2em; // standard, good-looking line-height
  border-bottom: 1px solid #103d3b;
  padding: 10px 40px 10px 10px; // padding to accomplish top/bottom spacing (so it's always even) and spacing on right
  font-size: 13px;
  background-image: url(images/listarrow.png);
  background-position: right center;
  background-repeat: no-repeat;
}

我意识到在这种情况下你不会为每个对象获得相同的行高，但我仍然认为它看起来会更好。如果保持精确的行高很重要，在WebKit中实现动态垂直居中的最简单方法是使用包含这样的属性的包装div（保持li的高度和#wrapper的宽度正如你之前提到的那样：

ul li {
  display:table;
}
ul li div#wrapper {
  display:table-cell;
  vertical-align:middle;
}

使用行高而不是100％宽度垂直居中列表项中的文本

1 个答案: