10

2 つの要素を含むヘッダーがあります。1 つ目は会社のロゴの画像で、幅が 25% に設定されています。もう 1 つはナビゲーション バーで、要素がインラインに設定されているため、水平になっています。ナビゲーションバーを垂直方向の中央に設定したいのですが、私の人生ではそれがわかりません。私が知っていることはすべて、vertical-align を使用できる要素に設定し、すべてをインライン表示またはテーブル セルに配置して適用します。何も機能しません。

静的な割合のパディングまたはマージントップを指定しない理由は、ページが広くなると画像の高さが幅と同じように拡大するため、ブラウザを水平に拡大するとナビゲーションがますます外側になるためです。場所。

オブジェクトを垂直方向に中央に配置するだけで（私が認めたいよりもはるかに長く）試みたので、助けていただければ幸いです。

HTML カットダウン:

<div id="container">
<header id="header" role="banner">
    <img src="images" />
    <nav id="nav" role="navigation">
    <ul>
        <li><a href="#" title="About Us">About Us</a></li>
        <li><a href="#" title="Biographies">Biographies</a></li>
        <li><a href="#" title="Services">Services</a></li>
        <li><a href="#" title="Careers">Careers</a></li>
        <li><a href="#" title="Contact">Contact</a></li>
    </ul>
    </nav>
</header>

CSS カットダウン:

header img {
    height: auto;
    width: 25%;
    float: left;
    }

header nav {
    width: 75%;
    font-size: 1em;
    }

header nav li {
    display: inline-block;

    width: 19%;
    }

header nav li a {
    background: #2CB2E6;
    line-height:

単純な jsFiddle を次に示します: http://jsfiddle.net/LbTCT/

4

3 に答える 3

11

これがあなたのオリジナルのフィドルのフォークです。inline-blockロゴとnav要素自体を設定する必要があります。

header img, header nav {
    display: inline-block;
    vertical-align: middle;
}

float物事を試みるのではなく。

于 2013-03-12T17:17:59.210 に答える
0

これを行う1つの方法は、マークアップに小さな変更を加えることです。

<div id="header">
<header role="banner">
    <nav id="navigation" role="navigation">
        <ul>
            <li>
                <img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/chamber-logo.png">
            </li>
            <li><a href="#" title="About Us">About Us</a>

            </li>
            <li><a href="#" title="Biographies">Biographies</a>

            </li>
            <li><a href="#" title="Services">Services</a>

            </li>
            <li><a href="#" title="Careers">Careers</a>

            </li>
            <li><a href="#" title="Contact">Contact</a>

            </li>
        </ul>
    </nav>
    </header>
</div>

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

    #header {
        background-color: #cccccc;
        padding: 5px 0;
    }
    header {
        background-color: #f0f0f0;
    }
    header nav {
        border: 1px solid red;
    }
    header nav ul {
        margin: 0;
        padding: 0;
    }
    header nav li {
        display: inline;
        margin: 0;
        padding: 0;
    }
    header nav li img {
        vertical-align: middle;
        border: 1px solid blue;
    }
    header nav li a {
        vertical-align: middle;
        font-size: 1.00em;
        text-decoration: none;
        background-color: white;
        color: black;
        padding: 10px;
        margin: 0 0 0 10px;
    }

<li>重要なのは、リストの最初の要素にロゴ画像を配置することです。次に、リストのすべての要素をとして表示し、それらを並べるためにinline使用します。vertical-align: middle

パディングとマージンのプロパティを調整して、必要な外観を正確に得ることができます。

参考のためのフィドル：http：//jsfiddle.net/audetwebdesign/adW9Y/

注：
このコードは、画像サイズをビューポートに合わせて拡大縮小するのにも役立ちます。

次のCSSルールを追加します。

.autoSize {
   width: inherit;
}
.autoSize img {
    width: 25%;
}

次のように、マークアップにクラスを追加します。

<li class="autoSize">
    <img src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/chamber-logo.png">
</li>

ul要素はビューポートの幅まで拡張されるため、画像をラップする子要素に幅を継承できますli。次に、画像の相対幅（この例では25％）を設定すると、柔軟でレスポンシブなスケーリングが得られます。

于 2013-03-12T17:57:25.893 に答える
0

すべてをインラインブロックとして配置することに関する答えは正しいです。そのような状況では、要素をドキュメント フローから切り離す以外に、フロートは何もしません。ただし、古いブラウザーをターゲットにしている場合は、表のセルの外側での垂直方向の配置をサポートしていないブラウザーで機能するソリューションを次に示します。

フィドルの例

関連する CSS の変更は次のとおりです。

header {
    position:relative;
    display:block;
}
header:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height: 0;
}
header nav {
    width: 70%;
    font-size: 1em;
    position: absolute;
    top: 50%;
    line-height: 200%;
    margin-top: -2em;
}
于 2013-03-12T17:26:26.593 に答える