Html,CSS垂直对齐菜单

Question

我正在尝试制作一个菜单,但是我无法将文本居中到中间.

<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;
}

Answer 1

这个问题有一些解决方案.

这是一个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;
}

Answer 2

给它和line-height元素一样,height文本应该正确对齐