当调整大小窗口和文本在两行上时，<li>中的文本垂直对齐

Question

很多天我想解决我的问题...但是非常困难：

我想在 li

中对文字进行垂直对齐

许多人（在更多问题中）建议使用

display: table

表示父项，显示：表格单元格表示 li

是一个好主意，但有问题（填充，边距，浮动不起作用）......

示例：

<ul>
 <li class="text">
  <span>Text on one line</span>
 </li>
 <li class="text">
  <span> More text on two lines --------</span>
 </li>
</ul>

.text{
 bakground: #e9e9e9;
 list-style: none;
 color: 000;
 height: 40px;
 margin: 5px;
 padding: 3px;
}

更好的解决方案是：

.text span{
   position: relative;
   top: 30%;
}

对我来说这是更好的解决方案，但是有一个问题...... 如果 li 的文字在一行上是可以的，但如果在两行上，则文字（2°行）退出 li

当文本在两行上时，需要取消此代码的内容......

你可以帮帮我吗？

谢谢！抱歉我的英文

Answer 1

您可以使用flexbox：

.text {
  display: flex;
  align-items: center;
}

.text {
  background: #e9e9e9;
  list-style: none;
  height: 40px;
  margin: 5px;
  padding: 3px;
  display: flex;
  align-items: center;
}

<ul>
  <li class="text">
    <span>Text on one line</span>
  </li>
  <li class="text">
    <span>More text on two lines<br />--------</span>
  </li>
</ul>

如果内容可能比flex容器高，并且您想使用overflow添加一些滚动机制，请更好地使用auto margins。

.text { display: flex; }
.text > span { margin: auto 0; }

.text {
  background: #e9e9e9;
  list-style: none;
  height: 40px;
  margin: 5px;
  padding: 3px;
  display: flex;
  overflow: auto;
}
.text > span {
  margin: auto 0;
}

<ul>
  <li class="text">
    <span>Text on one line</span>
  </li>
  <li class="text">
    <span>More text on two lines<br />--------</span>
  </li>
  <li class="text">
    <span>A<br />B<br />C<br />D<br />E<br />F<br />G<br />H</span>
  </li>
</ul>