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

这将是使用背景图像的某种标准方式。将图像放入其中body，文本可以在 a 内div（这里div's id是“内容”）。试试下面的代码。删除评论，看看会发生什么。（当然background-image在body删除评论时评论content）

<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 回答
0

放在

  text-align:center;

在 .image 类中

并使用 css

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

将背景放入 .image div

于 2012-05-25T07:00:29.190 回答