Vertical align text inside inline li

Question

I am trying to create a self-adjusting horizontal menu and looking to vertically align text within li's that are displayed as inline. Currently the text is glued to the top. All my attempts have failed. See markup below.

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

I don't want to use line-height because the text may wrap.

score 1 · Accepted Answer · answered Jan 08 '17 at 02:31

With using float, I think you should change display:inline: to display:flex: and use align-items:center; to bring them vertically in the middle. Them wrap the text around with a span so that you can control the text styles more easily.

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

score 0 · Answer 2 · answered Jan 08 '17 at 02:28

vertical-align should help you in this case, while float is breaking this behavior.

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

Vertical align text inside inline li

2 Answers2