列表<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>

不当行为示例。

对于这种文本对齐，是否有一些简单的解决方案(我想避免使用div/网格等(？

谢谢！ 马尔钦

Answer 1

align-self: center;

在 li-Tags 上，如果我理解正确的话。

Answer 2

.menu li{
margin:auto 0;
}

自动上的边距顶部和底部将垂直居中。