0

ページのセンタリングテストを（水平方向に）実行する方法を（多くの優れた例を使用して）検索、テストするのに何時間も費やしましたが、問題の根本的な原因を見つけることができません。背景画像は表示されませんが、すべての場合、テキストはページの左側の左上隅に表示されます（おそらく。を使用しているためです）。画像が表示される場合、テキストは表示されます。画像の下の左下隅にあります（絶対位置を使用している場合でも）。私が試した最新のコードサンプルは次のとおりです。 

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Arizona Sunset</title>

  <style type="text/css"

.image {
    position:relative;
 }

.text {
left: 0;
position:absolute;
text-align:center;
top: 315px;
width: 100%
 }


 </style>

 </head>
 <body>

 <div class="image">
<img src="bg-image5.jpg" width="100%" height="2540"/>
<div class="text">
   Yadda, Yadda, Yadda
</div>
 </div>
  </body>

私は何が間違っているのですか？

4

3 に答える 3

1 
<div class="image">
<img ...>
</div>

<div class="text>
text
</div>

body {
width: 100%;
}

.image {
position: relative;
}

.text {
margin: 0 auto;
text-align: center;
...
}

私は通常、ブラウザにmargin設定して自動的にそれを行わせることによって中央に配置しますauto

于 2012-05-25T06:59:35.103 に答える
0

置く

  text-align:center;

.imageクラスで

そしてcssを使用します

background-image:url('paper.gif');

.imagedivに背景を配置します

于 2012-05-25T07:00:29.190 に答える
0

これは、背景画像を使用するためのやや標準的な方法です。画像をに配置すると、テキストをaの中に入れるbodyことができますdiv（ここでdiv's idは「コンテンツ」です）。以下のコードを試してください。コメントを削除して、何が起こるかを確認してください。（もちろんコメントを削除するときはコメントしてbackground-imageください）bodycontent

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
body{
background-image:url('bg-image5.jpg');
//background-repeat: no-repeat; //Image repeats automatically in the whole body of the page.
}

#content {
  //background-image:url('reminder2.jpg'); //If used here, image shows up only where there is text. Use minimum height or something else to include the whole image if necessary.
  text-align:center;
  //min-height:1000px;
}
</style>
</head>

<body>
  <div id="content">
  <p>Text, text, text, text, text, text, text, text, text</p>
  </div>
</body>

リンクのカップル：

背景画像自体は重要ではありません。サイトの見栄えを良くしますが、全体として表示する必要のある重要な画像ではありません（背景にある、画像ギャラリーの画像ではないなど）。sections異なるページまたはdiv's単一のページで複数の画像を使用する場合は、背景画像の通常の再現性と機能が問題になる可能性があります。

于 2012-05-26T10:06:10.243 に答える