2

メニューを作成しようとしていますが、テキストを中央に配置するのに問題があります。

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

ここに画像の説明を入力してください

4

2 に答える 2

8

line-height要素と同じものを指定するheightと、テキストが適切に配置されます。

于 2012-04-13T21:52:17.620 に答える
7

この問題にはいくつかの解決策があります。

以下のすべてのソリューションを示すjsFiddleを次に示します。

まず、メニューのリストアイテムのdisplayプロパティをに設定してから、を使用してテキストを中央に配置できます。table-cellvertical-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 に答える