Question

我是一个相对较新的HTML和CSS的人，很抱歉，如果这是一个愚蠢的问题。

无论如何我似乎无法重新创造这个：

enter image description here

我正在将此移动应用转换为网页。无论如何，我有一个'包装'，以便在调整大小时使一切都居中，这是我的第一个问题但是当我这样做时，我无法重新定位包装内的div，当使用position：absolute时。我通过对其中一个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>

两张图片（包含图标）这是我的代码^

Answer 1

使用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

Answer 2

我没有你的图像（宽度，高度或位置），所以我使用了一些临时图像并将它们偏离中心偏移在屏幕上。这是一套最小的代码，可以帮助您完成绝对到中心的定位。

<!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>

Answer 3

您似乎最终希望为不同的分辨率断点创建媒体查询。但与此同时，由于所有图形元素都显示在屏幕上的中心点，因此您可以使用以下公式来定位每个项目：

#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来正确调整每个图标的边距。

绝对定位内部绝对定位Div

3 个答案: