如何將菜單中的鏈接垂直居中？

這裏的HTML：如何將菜單中的鏈接垂直居中？

<nav> 
     <ul class="menu"> 
      <li class="li_pc"><a href="#">PC</a></li> 
      <li class="li_one"><a href="#">ONE</a></li> 
      <li class="li_ps3"><a href="#">PS4</a></li> 
      <li class="li_360"><a href="#">360</a></li> 
      <li class="li_ps3"><a href="#">PS3</a></li> 
      <li class="li_wiiu"><a href="#">WiiU</a></li> 
     </ul> 
    </nav>

和這裏的CSS：

nav { 
    padding: 0; 
    margin: 0; 
    widht: 1200px; 
    height: 100px; 
} 

ul li { 
    display: inline; 
    font-family: Verdana, Geneva, sans-serif; 
    float: left; /* IE */ 
    list-style-type: none; 
} 

ul li a { 
    display: block; 
    float: left; 
    width: 190px; 
    height: 60px; 
    padding: 0; 
    background-color: transparent; 
    color: white; 
    text-decoration: none; 
    text-align: center; 
} 

.li_pc a:hover { 
    background-color: #cc9a34; 
} 

.li_one a:hover { 
    background-color: #149a14; 
} 

.li_ps4 a:hover { 
    background-color: #040264; 
} 

.li_360 a:hover { 
    background-color: #9cce04; 
} 

.li_ps3 a:hover { 
    background-color: #0406b4; 
} 

.li_wiiu a:hover { 
    background-color: #5c12ac; 
}

我的目標是垂直居中在單元格中的文本。我正在使用文本對齊：中心;以水平居中，但當我使用vertical-align：middle;它甚至不移動像素。我嘗試了很多不同的方式，但它總是破壞這件事，並使得設計在週日早晨看起來像我的臉。

我該如何將這些垂直居中？

感謝提前:)

來源

2013-10-11 SixStrings

如果你的錨鏈接是60像素高大

line-height:60px

應該這樣做。

JSFiddle

來源

2013-10-11 11:10:36

嗨Paulie_D，謝謝你的快速回答！它完美的作品。 – SixStrings

@ user2870689您應該選擇左側的勾號來選擇該答案。 –

完成:)現在我有另一個問題。我可以將它作爲評論發佈嗎？ – SixStrings

如何將菜單中的鏈接垂直居中？

回答

相關問題