[英]Placing and aligning a div on another div
我一直在疯狂尝试在包含图像的另一个div上应用div。 div应该包括一个简单的HTML链接,如下图所示:
https://dl.dropbox.com/u/39682698/Fraud-Fighter2.png
不幸的是,当页面呈现图像时,URL不在图像的中心,如在现场站点中所示:
http://us.aktive.me/maintenance/
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:
@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;
}
一百万感谢任何可以帮助我的人:) -Dean
如下所示设置css。
#apDiv1 {
position: absolute;
right: 350px;
text-align: center;
top: 250px;
}
如果你想%
#apDiv1 {
position: absolute;
left: 30%;
text-align: center;
top: 31%;
}
要使DIV居中,可以执行以下操作:
width:400px; left:50%; margin-left: -200px;
#apDiv1的宽度必须与容器div的宽度相同。
现在根据您的设计定义您的ID
#apDiv1
left 50%
, margin-left
像这样
#apDiv1 {
left: 50%;
margin-left: -185px;
}
///////////////////////////////////////////////////// ///////////////////////////////////////////
第二方法是这个
现在定义您的ID
#apDiv1
left:0
和right:0;
#apDiv1{
left:0;
right:0;
}
将apDiv1 css设置为以下
#apDiv1 {
margin-top: 242px;
text-align: center;
position: absolute;
width: 100%; }
这应该工作
#apDiv1 {
width:inherit;
text-align: center;
position:absolute;
top:240px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.