1

次のリンクの画像のようなナビゲーション バーを html+css で作成しようとしています。

http://i.imgur.com/5PEhv.png

基本的に、左のフローティング四角形/div に灰色の大きなテキストがあり、右のフローティング四角形/div に赤の小さなフォントのリンクのリストがあり、そのテキストを削除することなく垂直方向に中央揃えにしたいと考えています。フロートの調整と、グレーと赤のボックスのマージン左/マージン右の調整。これは可能ですか?可能であれば、どのように行うことができますか?

4

2 に答える 2

0

div内のテキストを垂直方向に配置するのは非常に難しいようです。

秘訣は次のとおりです。

次のHTMLを想定します。

<div id="parent">
<p id="child"> text</p>
</div>

これで、次のトリックを実行して、テキストを垂直方向に揃えることができます。

#parent{
    display: table;
    ....
 }

 #child{
    display: talble-cell;
    vertical-align: center;
 }

これを行うと、次の結果になります。 http://jsfiddle.net/RLchH/1/

于 2012-06-23T13:47:45.850 に答える
0

赤い容器の高さが分かれば簡単です。HTML を次のように指定します。

<div class="red">
    <a href="Home">Home</a>
    <a href="...">...</a>
    <a href="etc.">etc.</a>
</div>

CSSは次のようになります。

.red {line-height: 50px; vertical-align: middle; background: #f00; font-family: tahoma, sans-serif; text-align: center; font-size: 11px; font-weight: bold;}
.red a {color: #fff; text-decoration: none;}

このフィドルをチェックしてください！それが役に立てば幸い！:)

于 2012-06-23T13:05:57.960 に答える