1

CSS を使用して、この一見単純な div の配置を理解しようとして、私は気が狂いそうになりました。CSS で background-image として定義された単一の画像を含む Web ページがあります。ここに示すように、クリック可能なリンクを含む 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;
}

ご協力いただきありがとうございます。-ディーン

4

2 に答える 2

0

私の観点からは、ポジショニングをやりすぎる必要はありません。どうですか

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

画像のサイズが固定されているので、それだけです。

于 2013-03-19T03:20:56.553 に答える
0

テキストを div の中央に配置する必要がある場合は、次を試してください。

#apDiv1 {
    text-align: center;
    ...
}
于 2013-03-19T03:21:15.367 に答える