在浏览器上放大和缩小时如何保持内容在适当位置 [英] How to keep content in position when zooming in and out on your browser

问题描述

我有一个div，我在其中输入了图片，然后位置:绝对"是另一个div，当单击该div时，它会将您带到页面底部.但是，当您缩小时，它会保留在原位，但是当您缩小时，它会向下移动并移出图片div.我问的是，在放大和缩小浏览器时如何保持内容居中并定位.我在整个堆栈和其他网站上进行了搜索，但是找不到解决方案.

I have a div where I inputted a picture and I "Position: absolute" another div that when clicked will bring you down to the bottom of the page. But when you zoom out, it stays in place but, when you zoom out it moves down and out of the picture div. I am asking, how do i keep my content centered and in position when zooming in and out of your browser. I searched all over stack and other websites but can't find a solution.

HTML

#pic-div {
	width: 100%;
	height: 700px;
	margin: 0 auto;
	overflow: hidden;
}
#pic-button {
	width: 100px;
	height: 100px;
	margin: 0 auto;
}
#down-button {
	max-width: 200px;
	max-height: 200px;
	background-color: black;
	border-style: none;
	color: white;
	font-family: 'Coiny', cursive;
	position: absolute;
	cursor: pointer;
	margin: 0 auto;
	margin-top: 500px;
}
#down-button:hover {
	background-color: grey;
}

<div id="pic-div">
<div id="welcome-pic"> <img id="pic-welcome" src="luxpics/logobar.jpg">
  <div id="pic-button">
    <button id="down-button">LET'S START</button>
  </div>
</div>
</div

推荐答案

尝试一下

#down-button {
  max-width: 200px;
  max-height: 200px;
  background-color: black;
  border-style: none;
  color: white;
  font-family: 'Coiny', cursive;
  position: absolute;
  cursor: pointer;
  margin: 0 auto;
  bottom: 25px;
  //margin-top: 500px;
}

这篇关于在浏览器上放大和缩小时如何保持内容在适当位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！