html - 自定义定位图像在不同屏幕尺寸上的变化 - HTML/CSS

Question

我正在我的笔记本电脑上制作一个网站，我以某种方式定位了图像，但是当我在我的 PC 上查看它时，图像仍然处于形状中，只是不在页面的中心右侧更多.

这是 HTML:

<div id="puzzle">

<a href="teeth.html">
  <IMG STYLE="position:absolute; TOP:35px; LEFT:640px; WIDTH:250px; HEIGHT:250px" SRC="TeethGrinding.jpg"" title="Bruxism - Teeth Clenching & Grinding - Click here for more info!">
</a>
<a href="weight.html">
  <IMG STYLE="position:absolute; TOP:35px; LEFT:820px; WIDTH:250px; HEIGHT:250px" SRC="weightloss.png"" title="Weight Loss (VGB)- Click here for more info!">
</a>
<a href="alcohol.html">
  <IMG STYLE="position:absolute; TOP:35px; LEFT:1000px; WIDTH:250px; HEIGHT:250px" SRC="achol.png"" title="Alcohol Problems - Click here for more info!">
</a>
<a href="stress.html">
  <IMG STYLE="position:absolute; TOP:215px; LEFT:640px; WIDTH:250px; HEIGHT:250px" SRC="stress.png"" title="Stress & Anxiety - Click here for more info!">
</a>
<a href="child.html">
  <IMG STYLE="position:absolute; TOP:215px; LEFT:820px; WIDTH:250px; HEIGHT:250px" SRC="child.png"" title="Hypnotherapy for Children - Click here for more info!">
</a>
<a href="sleep.html">
  <IMG STYLE="position:absolute; TOP:215px; LEFT:1000px; WIDTH:250px; HEIGHT:250px" SRC="sleep.png"" title="Insonmia & Sleep Disorders - Click here for more info!">
</a>
<a href="fear.html">
  <IMG STYLE="position:absolute; TOP:395px; LEFT:640px; WIDTH:250px; HEIGHT:250px" SRC="fear.png" title="Fears & Phobias - Click here for more info!">
</a>
<a href="sport.html">
  <IMG STYLE="position:absolute; TOP:395px; LEFT:820px; WIDTH:250px; HEIGHT:250px" SRC="sportpuzzel.png"" title="Sport Hypnotherapy - Click here for more info!">
</a>
<a href="smoking.html">
  <IMG STYLE="position:absolute; TOP:395px; LEFT:1000px; WIDTH:250px; HEIGHT:250px" SRC="smoker.png"" title="Stop Smoking - Click here for more info!">
</a>

</div>

这是CSS:

	#puzzle
	{
	   background-color:white;
	   background-position: center;
	   background-size: cover;
	   float:center;
	   font-weight: 300;
	   color: black;
	   position:center;
	   text-align:center;
	   line-height: 25px;
	   width:100%;
	   overflow-x: hidden;
       overflow-y: hidden;
	   height:685px;
	   word-spacing:3px;
	   position:relative;
	}

有人知道如何解决这个问题吗？

Answer 1

#puzzle 有相当多的无效 CSS。最重要的是，您没有提供足够的信息让我实际测试它。然而，我可以给你一个例子(我个人最喜欢的)一个常用方法居中一个 block 元素垂直，水平，或两者。

要使此方法起作用，我们需要设置固定的 width 和(取决于是否垂直居中)height。诀窍是将 block 元素的 left 和 top 设置为屏幕的 50%，然后使用 negative margin 值将其拉回原位，大小为元素固定大小的一半。

#centered {
background-color:#000;
height:75px;
left:0px;
position:absolute;
top:0px;
width:75px;
}

#centered > span {
display:block;
height:25px;
position:absolute;
width:25px;
}

#centered.horizontally { left:50%; margin-left:-37px; }
#centered.vertically { margin-top:-37px; top:50%; }

#one { background-color:#f00; left:0px; top:0px; }
#two { background-color:#0f0; left:25px; top:0px; }
#three { background-color:#00f; left:50px; top:0px; }

#four { background-color:#ff0; left:0px; top:25px; }
#five { background-color:#f0f; left:25px; top:25px; }
#six { background-color:#0ff; left:50px; top:25px; }

#seven { background-color:#333; left:0px; top:50px; }
#eight { background-color:#777; left:25px; top:50px; }
#nine { background-color:#aaa; left:50px; top:50px; }

<div class="horizontally vertically" id="centered">
	<span id="one"></span><span id="two"></span><span id="three"></span>
	<span id="four"></span><span id="five"></span><span id="six"></span>
	<span id="seven"></span><span id="eight"></span><span id="nine"></span>
<div>

我希望你能用这个例子很好地解释这个简单的方法，以便能够轻松地将它应用到你自己的元素中。