Question

我到目前为止制作了一个包含三张图片的html和css文件;标题，导航和内容，以及导航的无序列表。

我希望标题和导航图像以150px的上边距为中心，我已经完成了它看起来很完美。然后我添加内容图像并为其编写css，但是当我预览它时，所有图像都会到达页面的中心（垂直），我看不出是什么导致了这一点。

这是HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Internet</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">

  <div id="top">
    <div id="title">

    </div><!--Title End-->

    <div id="nav">
          <ul class="nav-links">
              <li><a href="#"> Home </a></li>
          </ul><!--Nav Links End-->

     </div><!--Navigation End-->

  </div><!--Top End-->

  <div id="content"> 

  </div><!--Content End-->

  <div id="footer">

  </div><!--Fotter End-->

</div><!--Container End-->
</body>

</html>

这是CSS代码：

* {
  margin: 0px;
  padding: 0px;
  border: none;
}

body {
  background-image: url(images/background.png);
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #ffffff;
}

#container {
margin: auto;
width: 100%
}

#top {
float: left;
width: 100%;
height: 80px;
margin-top: 150px;
}

#title {
background-image: url(images/title.png);
float: center;
width: 311px;
height: 80px;
margin-top: auto;
margin-left: 20%;
margin-right: auto;
}

#nav {
background-image: url(images/navigation.png);
float: center;
width: 362px;
height: 50px;
margin-left: auto;
margin-right: 20%;
margin-top: -50px;
}

#content {
background-image: url(images/content.png);
float: center;
width: 724px;
height: 500px;
margin-top: 250px;
margin-left: auto;
margin-right: auto;
}

提前致谢！

Answer 1

您的float: center;正在从页面流中取出div。您可能只想使用background-position将图像放在div中。

图像不在正确的位置

1 个答案: