9

問題

divそこで、aタグを含むシンプルなナビゲーションメニューを作成しています。現在、次のようになっています。

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

以下は私のHTMLとCSSです。

HTML

<div id="tabcontent-container">
    <div class="tabcontent-menu">
        <a href="#">WLAN Jumpstart</a>
        <a href="#">Mobility</a>
        <a href="#">Guest Access Jumpstart</a>
    </div>
</div>

CSS

#tabcontent-container { padding: 15px 0px; position: relative; text-align: center; border-radius: 25px; -webkit-border-radius: 25px; }
.tabcontent-menu {}
.tabcontent-menu a { text-decoration: none; color: white; font-size: 30px; border-right: 1px solid white; line-height: 33px; padding: 0 22px; display: inline-block; width: 200px; height: 70px; vertical-align: top; }
.tabcontent-menu a:last-child { border:none; }
.tabcontent-menu a:hover { color:#000; }

Jsfiddle.netでの実例

質問

a真ん中の「モビリティ」タグを真ん中に揃えるもっと簡単な方法があるのではないかと思います。他の2つのリンクは二重線であるため、見栄えがします。私は意図的にそれらを二重線にしたのですが、今は真ん中のものをどうにかして真ん中に揃える必要があります。

助言がありますか？

4

2 に答える 2

5

を使用vertical-align: middleして、垂直方向の位置を調整できます。これはテーブルセルでのみ機能するdisplay: table-cellため、.tabcontent-menu a

http://jsfiddle.net/H9VHs/8/

于 2012-07-31T21:05:55.263 に答える
2

私は通常、を変更することによってこのようなことを達成しline-heightます。

.tabcontent-menu a.midline {
 line-height: 64px;   
}

ここでそれを参照してください：http：//jsfiddle.net/PZVnq/

ドキュメント/参考資料

于 2012-07-31T21:02:55.693 に答える