个人中心
gpt4 book ai didi

html - Absolute Positioning Inside 绝对定位 Div

转载 作者：行者123 更新时间：2023-11-28 15:23:39 24 4
gpt4 key购买 nike

我是 HTML 和 CSS 的新手，如果这是一个愚蠢的问题，我深表歉意。

无论如何，我似乎无法重新创建它:

enter image description here

我正在将此移动应用程序转换为网页。无论如何，我有一个“包装”，可以在调整大小时使所有内容居中，这是我的第一个问题，但是当我这样做时，我无法在使用 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
}

http://codepen.io/gaelb/pen/XbWzRV?editors=110

关于html - Absolute Positioning Inside 绝对定位 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29812310/

24 4 0
文章推荐： css - 使用 Bootstrap Glyphicons
文章推荐： javascript - 将所有类别的输入文本框的值设置为 '0'
文章推荐： javascript - Jquery load() 使页面刷新
文章推荐： javascript - 长度返回未定义