HTML5とCSS 3 - 本部のテキストの垂直揃え中東

Question

私は縦に整列するヘッダメニュー/ナビゲーションリンクを整列する、

を助けてください。参照：

http://hyindia.com/demo/myoffshore/index.html

にここにコードを参照してください：

nav ul { list-style-type:none; padding:0px; margin:0px; float:left; width:100%;} 
nav ul li { float:left; width:119px; height:66px;} 
nav ul li a { 
float:left; 
width:119px; 
height:66px; 
font:bold 15px 'Myriad Pro'; 
color:#fff; 
text-shadow:1px 1px #1f1f1f; 
text-align:center; 
} 

<nav> 
<ul> 
    <li><a href="#" class="nav1">HOME</a></li> 
    <li><a href="#" class="nav2">HEALTH INSURANCE</a></li> 
    <li><a href="#" class="nav3">LIFE INSURANCE</a></li> 
    <li><a href="#" class="nav4">OVERSEAS MORTGAGES</a></li> 
    <li><a href="#" class="nav5">ESTATE PLANNING</a></li> 
    <li><a href="#" class="nav6">BANKING</a></li> 
    <li><a href="#" class="nav7">WEALTH MANAGEMENT</a></li> 
    <li><a href="#" class="nav8">QROPS</a></li> 
</ul> 

Answer 1

をあなたのNAVの項目のいくつかは、あなたが古典的なライン - を使用することはできませんいくつかの行にまたがるテキストを持っているので、 height-trick（行の高さを高さと同じにする）。

メニュースタイルを変更すると、display: table/table-row/table-cellを使用することをお勧めします。中間にあるものを縦に並べるとテーブルが優れているからです。あなたがする必要がどのような

はこれにあなたの全体のnavスタイリングを変更することです：

nav { 
    display: table; 
    width: 100%; 
} 

    nav ul { 
     display: table-row; 
     list-style: none; 
     padding: 0; 
     margin: 0; 
    } 

     nav ul li { 
      display: table-cell; 
      vertical-align: middle; 
     } 

      nav ul li a { 
       display: block; 
       padding: 5px 10px; 
      } 

（代わりにaのパディングを使用して）すべての浮動小数点数と幅+高さなどを取り外します（私は上記の持っているもの全てですあなたが持っている必要があります）。

また、（しますが、li秒）aの高さに任意のより平等ではありませんので、li秒にa秒から実際の背景スタイリングを移動する必要があります。ここで

Answer 2

非常によく説明し5つの方法です：http://blog.themeforest.net/tutorials/vertical-centering-with-css/