0

ロゴの両側にナビゲーション オプションがあるヘッダー/ナビゲーション バーを作成しようとしています。これを達成するために、私は要素を使用<li>して<li class>いますが、垂直方向のセンタリングにはほとんど成功していません。何か案は？

HTML

<header>
    <nav>
        <ul>
            <li class="btn"><a href="#"><span>01</span>Home</a></li>
            <li class="btn"><a href="#"><span>02</span>Vendors</a></li>
            <li><a href="#"><img src="img/logo.png" alt="sews logo" /></a></li>
            <li class="btn"><a href="#"><span>03</span>Tickets</a></li>
            <li class="btn"><a href="#"><span>04</span>Blog</a></li>
        </ul>
    </nav>
</header>

CSS

nav {
    margin: 40px auto;
    width: 600px;
    padding-bottom: 80px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    margin:0 10px;
}

nav ul li.btn a {
    padding-top: -10px;
}

nav ul li a span {
    color: #e3c22a;

font-family: fanwood;

}

4

3 に答える 3

1

何かを垂直方向に中央に配置するには、コンテナ要素display: table cellに加えてcss ルールを適用します。vertical-align: middle

于 2012-12-19T22:52:15.710 に答える
0

リンクと画像が div などの同じ要素にある場合は、次のスタイル タグを使用するように画像を設定できます。

于 2012-12-19T22:51:16.780 に答える
-1

position relativeヘッダー。position absolute画像。left: 50%;画像

于 2012-12-19T22:52:11.280 に答える