4

画面全体に繰り返されるヘッダー画像があるため、画面の解像度に関係なく、ヘッダーが常に100％引き伸ばされるため、画像をラッパーdiv内に配置しました。その DIV の上に、「ロゴ」を配置して、常に画面の上部の中央に配置したいと考えています。

これは別の方法で行うことができ、Photoshop のヘッダーの上にロゴを配置することを既に試みましたが、希望どおりに画像を中央に配置することはできませんでした。

以下の私のコードを見つけてください：

HTML:

<div id="wrapperHeader">
    <div id="header">
             <img src="images/logo.png" width="1000" height="200" alt="logo" />
    </div> 
</div>

CSS:

#wrapperHeader{
    position: relative;
    background-image:url(images/header.png);
}

#header{
    left: 50%;
    margin-left: -500px;
    background:url(images/logo.png) no-repeat;
    width:1000px;
    height:200px;
}

また、margin-left:auto; のプロパティも認識しています。など。ここで適切に使用する方法を誰かが説明していただければ幸いです。

ありがとう！

4

3 に答える 3

10

私があなたを正しく理解しているなら、これがあなたに必要なものだと思います：

<div id="wrapperHeader">
 <div id="header">
  <img src="images/logo.png" alt="logo" />
 </div> 
</div>



div#wrapperHeader {
 width:100%;
 height;200px; /* height of the background image? */
 background:url(images/header.png) repeat-x 0 0;
 text-align:center;
}

div#wrapperHeader div#header {
 width:1000px;
 height:200px;
 margin:0 auto;
}

div#wrapperHeader div#header img {
 width:; /* the width of the logo image */
 height:; /* the height of the logo image */
 margin:0 auto;
}
于 2012-07-17T15:04:53.457 に答える
3

マージンを設定するとmargin:0 auto、画像が中央に配置されます。

これにより、上下のマージンが 0 になり、左右のマージンが「auto」になります。div には幅 (200px) があるため、画像の幅は 200px になり、ブラウザは左右の余白をページに残っているものの半分に自動的に設定します。これにより、画像が中央に配置されます。

于 2012-07-17T14:51:29.997 に答える
3

css でヘッダーの幅を設定する必要はありません。次のコードを使用して背景画像を中央に配置するだけです。

background: url("images/logo.png") no-repeat top center;

imgまたは、タグを使用align="center"してdivに入れることもできます

于 2012-07-17T14:51:51.140 に答える