html - html5で画像を揃える

Question

私はこのコードを持っています:

<header>
    <div id="title">                
        <img alt="logo" src="/Content/logo.gif" />
    </div>
    <nav>
        <ul id="menu">
            <li>Products</li>
            <li>Auctions</li>
            <li>Segmentation</li>
        </ul>
    </nav>
</header>

それはこれを生成します：

画像が白いボックスの上になるようにしたい（画像に従って整列する）。どうすればいいのですか？

ところで、デフォルトの asp.net mvc3 テンプレートを使用します。

ありがとう。

score 2 · Accepted Answer

これらの要素を浮かせていると思います。その場合は、ヘッダーのオーバーフロープロパティを設定してみてください。

header {
   overflow: auto
}

score 0 · Accepted Answer

これを Internet Explorer < 9 でテストしている場合は、次<header>を使用してタグを定義していることを確認してください。

<script type='text/javascript'>document.createElement('header')</script>

またはライブラリをブロックレベル要素 ( header{display:block}) としてスタイリングしてから、スタイルを試行します。

score 0 · Accepted Answer

自然な位置から 100px 上に配置したい場合は、これを使用します。

#title img {
   margin-top: 100px
}

またはこれ：

#title img {
   position: relative;
   top: 100px;
}

html - html5で画像を揃える

3 に答える 3

Related

Reference