<分区>
<分区>
我正在尝试创建一个 self 调整的水平菜单，并希望在 li 中垂直对齐显示为 inline 的文本。目前，文本粘在顶部。我所有的尝试都失败了。请参阅下面的标记。
#nav
{
display: inline-table;
padding: 0;
margin-top: 10em;
margin-bottom: 10em;
}
#nav > li
{
display: inline;
float: left;
height: 8em;
width: 8em;
padding: 0px 5px;
font-size: 1.5em;
color: #0a547c;
}
#nav > li:hover
{
background-color: blue;
cursor: pointer;
}<div style="text-align: center; height: 30em;">
<ul id="nav">
<li onclick="window.open('myLink1', '_self');">Text A</li>
<li onclick="window.open('myLink2', '_self');">Text B</li>
</ul>
</div>我不想使用 line-height 因为文本可能会换行。
最佳答案
使用 float，我认为你应该将 display:inline: 更改为 display:flex: 并使用 align-items :center; 将它们垂直放在中间。它们用 span 包裹文本，以便您可以更轻松地控制文本样式。
#nav
{
display: inline-table;
padding: 0;
margin-top:0;
margin-bottom: 10em;
}
#nav > li
{
display:flex;
align-items:center;
float: left;
height: 8em;
width: 8em;
padding: 0px 5px;
font-size: 1.5em;
color: #0a547c;
text-align:center;
}
#nav>li>span{
vertical-align:middle;
display:block;
width:100%;
}
#nav > li:hover
{
background-color: blue;
cursor: pointer;
}<div style="text-align: center; height: 30em;">
<ul id="nav">
<li onclick="window.open('myLink1', '_self');"><span>Text A</span></li>
<li onclick="window.open('myLink2', '_self');"><span>Text B</span></li>
</ul>
</div>关于css - 内联 li 中的垂直对齐文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41528807/