Question

我正在尝试创建一个自调整水平菜单，并希望在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因为文本可能会换行。

Answer 1

在这种情况下，

vertical-align可以帮助你，而浮动正在打破这种行为。

＆＃13;

    #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;
    }

＆＃13;

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

＆＃13;

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内的垂直对齐文本

2 个答案: