Вертикальное выравнивание текста внутри inline li

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

С помощью 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>

Answer 2

vertical-align должен помочь вам в этом случае, в то время как поплавок нарушает это поведение.

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