2

I'm trying to make a menu, but I'm having trouble centering the text to the middle.

<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

4

2 回答 2

8

将其与line-height元素的相同，height并且文本应正确对齐

于 2012-04-13T21:52:17.620 回答
7

这个问题有几个解决方案。

这是一个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-13T21:50:20.567 回答