Question

我一直在疯狂地试图找出使用CSS看似简单的div的位置。我有一个包含单个图像的网页，由CSS定义为背景图像。我想覆盖一个包含可点击链接的div，如下所示：

https://dl.dropbox.com/u/39682698/Fraud-Fighter2.png

我正在使用Dreamweaver CS6和Absolutely Positioned DIV来尝试实现这一目标。但是当页面呈现时链接不居中。我对CSS很新，所以对使用CSS放置对象的最佳方法的一些指导将非常感激。我之前已经成功使用了AP DIV ..不知道为什么它现在不起作用。这是页面：

http://us.aktive.me/maintenance/

HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ThreatMetrix Maintenance Page</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="apDiv1"><a href="http://threatmetrix.com/support">http://threatmetrix.com/support</a></div>
</body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */

body {
    background-color: #3fa9f5;
    background-image:url(fraud-fighter.png);
    background-repeat:no-repeat;
    background-position:center;
    background-position:top;
    font-size : 1.5em;
    font-family : Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a:link     { background-color: transparent; color:#f28a1a}
a:visited  { background-color: transparent; color:#f28a1a}
a:active   { background-color: transparent; position:relative}
a:hover    { background-color: transparent; color:#cb7518}
a.noformat { text-decoration: none; color: #121212}

#apDiv1 {
    position: absolute;
    width: 351px;
    height: 43px;
    z-index: 1;
    left: 233px;
    top: 240px;
}

非常感谢您的帮助。 -Dean

Answer 1

从我的观点来看，定位太远，没有必要。 <怎么样

   #apDiv1 {
        margin-top: 240px;
        text-align: center;
    }

这就是它，适合我，因为图像的大小是固定的

Answer 2

如果您需要以div为中心的文本，请尝试：

#apDiv1 {
    text-align: center;
    ...
}

需要帮助使用CSS布置页面

2 个答案: