0

我只是想把这张图片放在页面中间。这是我非常简单的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Viva La Nation</title>
    <style>
        #centered {
            margin-left: -148px;
            position: absolute;
            top: -285px;
            left: 50%;
            width: 570px;
            height: 296px;
        }

        body {
            background-image:url('seamless.png');
        }
    </style>
    <meta charset="UTF-8">
    <meta http-equiv="refresh"    
content="10;url=http://www.vivalanation.com/forums">

<link rel="icon" type="image/ico" href="/forums/favicon.ico">
</head>
<body onLoad="setTimeout('delayer()', 10000)">
  <div id="centered">
    <a href="http://www.vivalanation.com/forums/forum.php">
     <img src="images/logo_nin.png" style="border:0px"  />
    </a>        
  </div>    
</body>
</html>

如果我剪掉 CSS 代码，图像就会显示出来。我按照这个标志性的页面将图像置于中心位置：http: //www.wpdfd.com/editorial/thebox/deadcentre4.html，但由于某种原因它不会显示。而且我知道它肯定是 CSS，我只是不知道我哪里出错了。图像的总规格为 570x296。

哦，我刚找到它，它在屏幕顶部，文字的底部几乎看不到。

4

2 回答 2

0

您已设置top为要用于的值margin-left，以及margin-left要用于的值margin-top。这些top值应该是50%：

#centered {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 570px;
    height: 296px;
    margin-left: -285px;
    margin-top: -148px;
}

演示：http: //jsfiddle.net/Guffa/GMfSB/

于 2013-10-26T11:59:28.067 回答
0

将边距设置为“自动”并根据图像的大小设置为百分比。

于 2013-10-26T11:53:54.833 回答