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垂直对齐菜单

回答

相关问题