html - 列表 <ul> 中的更多行和垂直居中对齐

Question

我想创建一个元素列表(例如 ul)，其中某些元素的文本多于一行。所有文本，无论我有多少行，都应该垂直居中。请查看示例，其中“+”和“=”符号不在中心。

.menu ul{
  display: flex;
  }

  .menu li{
    list-style: none;
    text-align: center;
    align-content: center;
  }
<div class="menu">
 <ul>
  <li>Water <br> pressure <br> and volume</li>
  <li>+</li>
  <li>Pot <br> temperature</li>
  <li>=</li>
  <li>Something <br> difficult</li>
 </ul>
</div>

Example of improper behaviour .

是否有针对此类文本对齐的简单解决方案(我想避免使用 div/网格等)？

谢谢! 马尔辛

Answer 1

align-self: center;

在 li-Tags 上，如果我没理解错的话。