2

いくつかのアイテムを保持する順序付けられていないリストがあります。その目的は、navbar になることです。リストは、各 li 要素が table-cell の table-row として表示されるように設定されています。これらの要素はそれぞれ、アンカー タグを保持し、最初の要素はロゴを保持しています。問題は、アンカー要素が垂直に下に配置されており、それらを中央に配置する方法が見つからないことです。

問題の画像は次のとおりです。

ここに画像の説明を入力

<a>背景の緑と<li>背景の赤に色を付けました。ここに表示されているように、テキスト アンカー アイテムが下に配置されており、次の方法がわかりません。

a) アンカー テキストを垂直方向の中央に配置します
b) 親 li の高さ全体をアンカーで埋めます

vertical-align: center;li と a の両方に追加しようとしましたが、うまくいきませんでした。

これまでのhtml/cssコードの関連部分は次のとおりです

HTML: 

<body>
        <header class="mainHeader">
            <nav>
                <ul>
                    <li><a href="index.html"><img class="logo" src="logo.png" alt="index"></a></li>
                    <li><a href="#">Item1</a></li>
                    <li><a href="#">Item2</a></li>
                    <li><a href="#">Item3</a></li>
                </ul>
            </nav>
        </header>
        <footer></footer>
</body>

CSS: 

.mainHeader {
    background-color: #111;
    color: #999;

    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#111), to(#444));
    background-image: -webkit-linear-gradient(#111, #444);
    background-image: -moz-linear-gradient(#111, #444);
    background-image: -o-linear-gradient(#111, #444);
    background-image: linear-gradient(#111, #444);

    -webkit-box-shadow: 0 1px 1px #777;
    -moz-box-shadow: 0 1px 1px #777;
    box-shadow: 0 1px 1px #777;

    text-decoration: none;
    text-shadow: 0 1px 0 #777;

    overflow: hidden;
}

.logo {
    max-width: 130px;
    max-height: 170px;
}

.mainHeader ul{
    display: table-row;
}

.mainHeader li{
    width: 130px;
    display: table-cell;
    text-align: center;
    background-color: red;
}

.mainHeader a{
    display: block;
    background-color: green;
    text-decoration: none;
    color: #999;
}
4

1 に答える 1

1

以下のように CSS を変更して、期待される動作を得ることができます。変更された項目については、インライン コメントを参照してください。

.logo {
    max-width: 130px;
    max-height: 170px;
    vertical-align: middle; /* added */
}
.mainHeader li {
    width: 130px;
    display: table-cell;
    text-align: center;
    background-color: red;
    vertical-align: middle; /* to position contents in middle of nav bar */
    line-height: 150px; /* added */
}
.mainHeader a {
    display: inline-block; /* modified to support vertical-align */
    width: 100%;
    background-color: green;
    text-decoration: none;
    color: #999;
}

デモフィドル

于 2013-10-21T12:15:56.593 に答える