5

ページの真ん中にHTML要素を横にも縦にも入れたいのですが、横にも揃えるのに苦労しています。div「コンテンツ」を中央に配置したい。これが私のcssです：

#background
{
position:absolute; 
width:100%; 
height:100%; 
margin:0px; 
padding:0px; 
left:0px; 
right:0px;
z-index:1;
text-align: center;
}

#content
{
margin-left: auto;
margin-right: auto;
 width: 200px;
 z-index: 2;
 position: absolute;
}

そして、ここに私のHTMLがあります:

<html>
<head>
<link REL="STYLESHEET" TYPE="text/css" HREF="style/myStyle.css"> 
</head>
<body style="padding:0px; margin:0px; overflow:hidden;"> 


 <div id="background"><img src="images/backgroundimage.png" width="100%" height="100%">

 </div>

 <div id="content">

 <p>Here is some content</p>
 </div>

</body>
</html>

div は絶対位置に配置する必要があるため、次のようにします。

 margin: 0 auto;

うまくいきません。どうすればいいのかわからない。また、縦方向にページの中央に配置したいです。助けていただければ幸いです。

編集:サイズを変更できるように背景を別の div にする必要があり、位置が相対的な場合はコンテンツが表示されません。

4

3 に答える 3

6 
<html>
<body> 
 <div id="background">
 <div id="content">
  <p>Here is some content</p>
 </div>     
</div>
</body>
</html>

JQueryを使用せずに、コンテンツを中央に配置するためのより良い構造：

#background{
background: url(images/backgroundimage.png) top no-repeat;
width:100%;
height:100%;
position:relative;
}

#content{
position:absolute;
top:50%;
left:50%;
width :200px;
height:200px;
margin-left:-100px;
margin-top:-100px;
}
于 2012-04-15T22:04:14.317 に答える
0

背景画像に div id background を使用している場合は、css を使用して div のスタイルを設定できます。詳細については、w3schoolsサイトを参照してください。

理想的には、画像で新しい div を作成するのではなく、body タグに背景画像を使用します。

コンテンツをセンタリングするには、私の例から試してみてください。

マット

于 2012-04-15T21:01:11.433 に答える