1

ヘッダー、コンテンツ、およびフッターの div で構成された html ドキュメントがあります。ヘッダー div 内の画像 (ロゴ) を中央に配置して、Web ページの上部の中央に表示しようとしています。絶対に真ん中に配置できますが、ブラウザのサイズを変更すると、img がそれに合わせて移動しません。ウィンドウの中央に自動的に配置したい。私は困惑しています..？

私は、margin-right:auto; を試しました。margin-left:auto. また、margin-left を幅の半分と上部 50% の負の値にするトリックも試しましたが、これまでのところ何も機能していません。

html:

    <body>
<div id="container">

<div id="header">
    <img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/

CSS:

#header {

    background-color:transparent;
    height:260px;
    width:100%
}


#logo-img{
display: block;
    margin-left: auto;
    margin-right: auto;
}

また、コンテナも必要ですか？これに JavaScript が必要なのか、それとも html/css だけで実現できるのかわかりません。誰かが助けてくれることを願っています、ありがとう！

4

2 に答える 2

0

何が起こっているかというと、すでに画像を正しく中央に配置しているということです。

あなたの問題は、画像が巨大であることです。よく見ると、ブラウザ ウィンドウの幅が画像よりも小さくなると、画像が中央に配置されません。

画像から白い領域を削除すると、正しく中央に配置されます。

text-align:center編集：IEでは、ルールを追加する必要があります#header

別の方法：

画像を変更したくない場合は、次のハックを使用できます。

    <style>
    #header {
        overflow-y: hidden;
        background-color: transparent;
        height: 260px;
        width: 100%;
        margin-left: 50%;
    }


    #logo-img{
        display: block;
        position: relative;
        right: 50%;
    }
    </style>
    <body>
    <div id="container">

    <div id="header">
        <img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
    </div>
    /*...(body div)
    ...(footer div)*/
    </div> /*container*/

私はこのハックを少し前にここで学びました

于 2012-11-09T15:54:04.300 に答える