Vertical Ausrichtung Text inline li

Question

Ich versuche, ein selbstregulierendes horizontales Menü zu erstellen und suchen, Text vertikal innerhalb li, die als inline angezeigt werden. Derzeit ist der Text an die Spitze geklebt. Alle meine Versuche sind gescheitert. Siehe Markierung unten.

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

Ich will nicht line-height verwenden, weil der Text umgebrochen.

Answer 1

Mit Verwendung float, ich glaube, Sie display:inline:-display:flex: und align-items:center; verwenden ändern sollten sie senkrecht in der Mitte zu bringen. Sie wickeln den Text um eine span, so dass Sie die Textstile einfacher steuern können.

#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 sollte Ihnen in diesem Fall helfen, während Float dieses Verhalten bricht.

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