css - 在另一个 div 上放置和对齐一个 div

标签 css html alignment

我一直在疯狂地尝试将一个 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;
}

提前一百万感谢任何可以帮助我的人:) -院长

最佳答案

如下设置css。

#apDiv1 {
    position: absolute;
    right: 350px;
    text-align: center;
    top: 250px;
}

如果你想在 %

#apDiv1 {
    position: absolute;
    left: 30%;
    text-align: center;
    top: 31%;
}

关于css - 在另一个 div 上放置和对齐一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15491271/

相关文章:

html - 突出显示表中的列和行::之后和::之前不起作用

html - p 标签中的文本不会换行

javascript - 使用 Jquery 检查输入中的空格字符

java - 将按钮与框组件对齐

html - 表单对齐输入和下拉菜单

javascript - CSS/HTML5 :hover state remains after drag and drop

javascript - 将击键 append 到 div JS

jquery - Cycle 2 HTML 5 Video Plugin 播放/暂停仅适用于奇数而不是偶数

jquery - 缩小浏览器时出现 Nivo Slider 问题

html - 如何在垂直和水平方向上将每个 <div> 中的每个文本元素居中,以便文本恰好位于中间