在另一个div上放置和对齐div
[英]Placing and aligning a div on another div
问题描述
I've been going mad trying to apply a div over another div that contains an image. 
我一直在疯狂尝试在包含图像的另一个div上应用div。 The div should include a simple HTML link just like in this picture: div应该包括一个简单的HTML链接，如下图所示：
https://dl.dropbox.com/u/39682698/Fraud-Fighter2.png https://dl.dropbox.com/u/39682698/Fraud-Fighter2.png
unfortunately when the page renders the image the URL is not centered on the image, as seen on the live site here: 不幸的是，当页面呈现图像时，URL不在图像的中心，如在现场站点中所示：
http://us.aktive.me/maintenance/ http://us.aktive.me/maintenance/
HTML: 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="container">
<div id="apDiv1"><a href="http://threatmetrix.com/support">http://threatmetrix.com/support</a></div>
<div id="image"><img src="fraud-fighter.png" width="977" height="750" alt="ThreatMetrix Maintenance Page" /></div>
</div>
</body>
</html>
CSS: 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}
#container {
width: 1000px;
height: 800px;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
}
#apDiv1 {
margin-top: 240px;
text-align: center;
position:absolute;
}
#image {
z-index: 10;
}
a million thanks in advance to anyone that can help me :) -Dean 一百万感谢任何可以帮助我的人:) -Dean
6 个解决方案
解决方案1
0 2013-03-19 04:07:20
Set css as below. 如下所示设置css。
#apDiv1 {
position: absolute;
right: 350px;
text-align: center;
top: 250px;
}
if you want in % 如果你想%
#apDiv1 {
position: absolute;
left: 30%;
text-align: center;
top: 31%;
}
解决方案2
0 2013-03-19 04:08:44
要使DIV居中，可以执行以下操作：
width:400px; left:50%; margin-left: -200px;
解决方案3
0 2013-03-19 04:11:26
＃apDiv1的宽度必须与容器div的宽度相同。
解决方案4
0 2013-03-19 04:11:42
NOw define your ID #apDiv1 left 50% and margin-left according to your design 现在根据您的设计定义您的ID #apDiv1 left 50% ， margin-left
as like this 像这样
#apDiv1 {
left: 50%;
margin-left: -185px;
}
/////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////
2nd method is this 第二方法是这个
now define Your ID #apDiv1 left:0 and right:0; 现在定义您的ID #apDiv1 left:0和right:0;
#apDiv1{
left:0;
right:0;
}
解决方案5
0 2013-03-19 04:13:50
set the apDiv1 css to below 将apDiv1 css设置为以下
#apDiv1 {
margin-top: 242px;
text-align: center;
position: absolute;
width: 100%; }
解决方案6
0 2013-03-19 04:15:21
This should work 这应该工作
#apDiv1 {
width:inherit;
text-align: center;
position:absolute;
top:240px;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.