インラインの内側にテキストを縦に並べる

Question

自己調整の水平メニューを作成し、と表示されている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

、私はあなたがdisplay:flex:にdisplay:inline:を変更し、中央で縦にそれらをもたらすために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浮動小数点がこの動作を破っている間、このケースではあなたを助けてください。 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>