我是 HTML 和 CSS 的新手，如果这是一个愚蠢的问题，我深表歉意。
无论如何，我似乎无法重新创建它:
我正在将此移动应用程序转换为网页。无论如何，我有一个“包装”，可以在调整大小时使所有内容居中，这是我的第一个问题，但是当我这样做时，我无法在使用 position:absolute 时重新定位包装内的 div。我通过对其中一个 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>对于两个图像(包含图标) 这是我的代码^
最佳答案
随着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
}
关于html - Absolute Positioning Inside 绝对定位 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29812310/