Пользовательские позиционированные изображения меняются на разные размеры экрана - HTML/CSS

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:

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

Кто знает, как это исправить?

Answer 1

Существует довольно много недействительных CSS для #puzzle. Кроме того, вы не предоставили достаточно для меня, чтобы проверить это. Однако я могу привести пример (мой личный фаворит) общий метод для center a 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"> 
 
\t <span id="one"></span><span id="two"></span><span id="three"></span> 
 
\t <span id="four"></span><span id="five"></span><span id="six"></span> 
 
\t <span id="seven"></span><span id="eight"></span><span id="nine"></span> 
 
<div>

Я надеюсь, что вы можете использовать этот пример объясняет этот простой метод достаточно хорошо, чтобы иметь возможность легко применять его в свой проект (ы).