Html，CSS垂直對齊菜單

我正在嘗試創建菜單，但我無法將文本居中放在中間位置。Html，CSS垂直對齊菜單

<div id="menucontainer"> 
      <ul id="menu"> 
       <li>@Html.ActionLink("Home", "Index", "Home")</li> | 
       <li>@Html.ActionLink("About", "About", "Home")</li> | 
       <li>@Html.ActionLink("Projects", "Projects", "Home")</li> | 
       <li>@Html.ActionLink("Forum", "Forum", "Home")</li> 
      </ul> 
     </div> 


#menu 
{ 
    background-image: url("../Content/img/bg-menu.png"); 
    height:50px; 
    padding-left:30px; 
    padding-right:25px; 
    text-align:center; 
    border-radius:20px; 
    background-repeat:repeat; 
    display:block; 
    list-style: none; 
    margin-left:55%; 
    position:absolute; 
    color:#aa4dc6; 
} 
#menu li 
{ 
    display:inline; 
    padding:5px 10px 9px 10px; 
} 
#menu a 
{ 
    text-decoration:none; 
    color:#606060; 
    text-decoration:none; 
    text-transform:capitalize; 
    font-size:19px; 
    font-weight:bold; 
    font-family: 'Open Sans', sans-serif; 
}

enter image description here

來源

2012-04-13 Reinard

如果高度菜單是一個不變的東西，那麼你應該可以做一個'padding-top'。 http://coding.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/#CSS-Basics1 – Jared 2012-04-13 21:44:52

@Jared #menu li包含填充，但增加頂部填充不會改變任何內容。 – Reinard 2012-04-13 21:51:26

給它相同line-height作爲元素的height和文本應正確對齊

來源

2012-04-13 21:52:17

該解決方案從設計角度來看有一個主要缺點。如果文本應該包裝一下，它會徹底破壞佈局。 – 2012-04-13 21:55:56

如果文本應該包裝 - 那麼它不應該垂直對齊......這是爲單行文本的案件，而不是段落左右 – 2012-04-13 21:59:14

我認爲這是一個合理的建議，像一個菜單，但我見過菜單中的文字也包含在內。這是一個很好的答案，但值得注意的是，'line-height'是建議作爲解決方案。 – 2012-04-13 22:08:04

對於這個問題的一些解決方案。

下面是一個jsFiddle，它演示了下面的所有解決方案。

首先，您可以嘗試將菜單中的列表項設置爲display屬性爲table-cell，然後您可以使用vertical-align:middle居中文本。

該解決方案可能會正常工作，因爲不是浮動列表項，您可以使用CSS使它們像表格單元格一樣工作。

ul#menu { 
    display: table-row; 
} 
ul#menu li { 
    display: table-cell; 
    vertical-align: middle; 
}

其次，您可以將line-height屬性設置爲列表項的高度。小心這個人會想到，因爲如果文字環繞它會破壞佈局：

ul#menu li { 
    height: 30px; 
    line-height: 30px; 
}

最後，而不是設置一個固定的高度，你可以使用填充設置列表項的高度。假設你使用的頂部和底部相同的填充，文字應在中心對齊：

ul#menu li { 
    padding: 15px 5px 15px 5px; 
}

來源

2012-04-13 21:50:20

Html，CSS垂直對齊菜單

回答

相關問題