绝对定位在绝对定位的分割内
我是HTML和CSS的新手，所以如果这是一个愚蠢的问题，我很抱歉。
无论如何，我似乎不能重新创建这个：
我正在将此移动应用程序转换为网页。无论如何，我有一个‘包装’，使所有的东西在调整大小时居中，这是我的第一个问题，但当我这样做时，我不能重新定位在包装中的div，当使用position:absolute时。我通过对其中一个div使用相对定位部分修复了这个问题，但这导致我无法将相对定位的div放在我想要的位置。我的问题是:当以不同的分辨率加载和调整窗口大小时，我如何排列像图像一样的图标，使其不移动？
/* Body */
#body {
background-image: url('images/bg-img.jpg');
font-family: Museo300-Regular, Museo700-Regular;
}
/* Font */
@font-face {
font-family: Museo300-Regular;
src: url(Museo300-Regular.otf)
}
/* Nav */
#wrapper {
margin-left: auto;
margin-right: auto;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
/* IE 9 */
-webkit-transform: translate(-50%, -50%);
/* Safari */
transform: translate(-50%, -50%);
}
#home {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
/* IE 9 */
-webkit-transform: translate(-50%, -50%);
/* Safari */
transform: translate(-50%, -50%);
z-index: 6;
}
#contact {
position: absolute;
top: 80%;
left: 30%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
/* IE 9 */
-webkit-transform: translate(-50%, -50%);
/* Safari */
transform: translate(-50%, -50%);
z-index: 5;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Micah Friesen</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body id="body">
<!-- page content -->
<!-- Navigation -->
<div id="wrapper">
<div id="home">
<a href="index.html">
<img src="images/homebttn2.png" title="Homepage (Here)" />
</a>
</div>
<div id="contact">
<a href="contact.html">
<img src="images/contactbttn.png" title="Contact Me, this also includes Rates" />
</a>
</div>
</div>
</body>
</html>
对于这两个图像(包含图标)，这里是我的代码^
回答 3
Stack Overflow用户
发布于 2015-04-23 11:07:57
使用flex layout，您可以在水平和垂直方向上很好地居中元素。
html {
height: 100%
}
body {
background-image: url('images/bg-img.jpg');
font-family: Museo300-Regular, Museo700-Regular;
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
#wrapper {
position: relative;
}
#wrapper > div {
border-radius: 50%;
width: 100px;
height: 100px;
overflow: hidden;
margin: auto;
position: relative;
}
#wrapper > div#home {
width: 150px;
height: 150px;
}
#wrapper > div#contact {
width: 100px;
height: 100px;
left: -150px;
top: 10px
}http://codepen.io/gaelb/pen/XbWzRV?editors=110
Stack Overflow用户
发布于 2015-04-23 11:40:18
我没有你的图像(宽度、高度或位置)，所以我使用了一些临时图像，并将它们从中心偏移放置在屏幕上。这里有一组最小的代码，让你从绝对到中心进行定位。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
/* Body */
#body {
background-image: url('images/bg-img.jpg');
font-family: Museo300-Regular, Museo700-Regular;
}
/* Font */
@font-face {
font-family: Museo300-Regular;
src: url(Museo300-Regular.otf)
}
/* Nav */
#home {
position: absolute;
top: 50%;
left: 50%;
z-index: 6;
margin-left: 20px;
margin-top: -200px;
}
#contact {
position: absolute;
top: 50%;
left: 50%;
margin-top: 160px;
margin-left: -180px;
z-index: 8;
}
</style>
</head>
<body id="body">
<!-- page content -->
<!-- Navigation -->
<div id="wrapper">
<div id="home">
<a href="index.html">
<img src="images/temp2.png" title="Homepage (Here)" />
</a>
</div>
<div id="contact">
<a href="contact.html">
<img src="images/temp.png" title="Contact Me, this also includes Rates" />
</a>
</div>
</div>
</body>
</html>Stack Overflow用户
发布于 2015-04-23 10:48:12
看起来你最终会想要为不同的分辨率断点创建媒体查询。但同时，由于所有图形元素看起来都是相对于屏幕上的中心点的，所以您可以使用以下公式来定位每个项目：
#itemName {
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px /* Image top edge distance from center, vertically */
margin-left: -100px; /* Image left edge distance from center, horizontally */
}如果根据屏幕宽度加载不同分辨率的图像，则需要使用媒体查询检测或javascript来正确调整每个图标的边距。
https://stackoverflow.com/questions/29812310
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号