Question

我只是试图将这张图片置于页面中间。这是我非常简单的代码：

<!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代码，则图像会显示出来。我按照这个icnonic页面到图像的死点http://www.wpdfd.com/editorial/thebox/deadcentre4.html，但由于某种原因它不会显示。我知道它肯定是CSS，我只是不知道我哪里出错了。图像的总规格为570x296。

哦，我刚发现它，它在屏幕顶部显示，文本的底部几乎看不见。

Answer 1

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

Answer 2

您已将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/

启用CSS时图像不显示

2 个答案: