Question

我花了很多时间搜索，测试（使用很多很好的例子）如何在页面上完成对中测试（水平），但我找不到问题的根本原因。背景图像不会显示，但在所有情况下，文本都会在左上角拥抱页面的左侧（很可能是由于使用了。）如果图像显示，则文本将显示在图像下方的左下角（即使使用绝对位置。）我尝试的最新代码示例如下：

  <!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>

我做错了什么？

Answer 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

Answer 2

把

  text-align:center;

<。>在.image类

中

并使用css

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

将背景放在.image div

中

Answer 3

这将是使用背景图像的某种标准方式。将图片放到body，文字可以放在div内（此处div's id是＆＃34;内容＆＃34;）。请尝试下面的代码。删除评论，看看会发生什么。（当您从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中使用多个图片，则背景图片的正常可重复性和功能可能会出现问题。

在包含背景图像的网页上（水平地）居中文本很困难

3 个答案: