内联 li 中的垂直对齐文本

Question

我正在尝试创建一个自我调整的水平菜单，并希望在显示为 inline 的 li 中垂直对齐文本。目前，文本粘在顶部。我所有的尝试都失败了。请参阅下面的标记。

#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 因为文本可能会换行。

Answer 1

vertical-align 在这种情况下应该可以帮助你，而 float 正在打破这种行为。

    #nav 
    {
        display: table;
        padding: 0;
        margin-top: 10em;
        margin-bottom: 10em;
    }

    #nav > li
    {
        display: table-cell;
        vertical-align: middle;
        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>

Answer 2

使用 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>

内联 li 中的垂直对齐文本

Vertical align text inside inline li

css

vertical-alignment

html-lists