Question

我正在我的笔记本电脑上制作一个网站，并且我已经以某种方式定位了图像，但是当我在我的电脑上看到图像时，图像仍处于不在页面中心的形状中

继承人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。最重要的是，你没有为我提供足够的实际测试。但是，我可以给你一个（我个人最喜欢的）一个例子，一个常见的方法center block元素垂直，水平或两者。

要使此方法有效，我们需要设置固定的width和（取决于垂直居中）height。诀窍是将block元素的left和top设置为屏幕的50%，然后使用负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>

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

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

1 个答案: