调整 window 大小时文本在 <li> 中垂直对齐，文本分两行

Question

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

我想要 li

中的文本垂直对齐

很多人（更多问题）建议使用

display: table

对于父级和显示：table-cell对于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>

调整 window 大小时文本在 <li> 中垂直对齐，文本分两行

vertical-align of text in <li> when resize window and text goes on two lines

html

css

vertical-alignment