Правильно масштабировать мой HTML-текст?
Я работаю над своим личным сайтом, просто учусь. У меня есть большой основной блок текста с названием моего сайта, а под ним несколько ссылок на мои социальные сети и т. д. Проблема в том, что большой основной блок текста отлично масштабируется, а маленький текст под ним-нет.
Код, который я сейчас использую для его размещения, находится здесь:
<!--text--> <div class="center"> <p style="position: absolute; top: 32%; left: 50%; transform: translate(-50%, -50%); font-family: 'Qwigley'; font-style: normal; font- size: 72px; color: white; text-shadow:0px 0px 5px white;">ndb.life</p> <a style="position: absolute; top: 44%; left: 44.5%; transform: translate(-50%, -50%); font-family: 'Courier New'; font-size: 14px; font- style: normal; color: white; text-shadow: 0px 0px 1px white; text- decoration: none;" href="http://steamcommunity.com/id/xfh" rel="noopener noreferrer" target="_blank">(main) steam</a> <a style="position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); font-family: 'Courier New'; font-size: 14px; font- style: normal; color: white; text-shadow:0px 0px 1px white;">youtube</a> <a style="position: absolute; top: 44%; left: 54%; transform: translate(-50%, -50%); font-family: 'Courier New'; font-size: 14px; font- style: normal; color: white; text-shadow:0px 0px 1px white;">configs</a> <a style="position: absolute; top: 44%; left: 57.5%; transform: translate(-50%, -50%); font-family: 'Courier New'; font-size: 14px; font- style: normal; color: white; text-shadow:0px 0px 1px white;">email</a> </div>
Класс, используемый в div, находится здесь в моем стиле.css:
#center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Попробуйте сами, просто возитесь с размером окна и наблюдайте, как текст входит друг в друга и странно перемещается. Есть ли способ это исправить?
Демонстрация[^]
Что я уже пробовал:
Изменение положения div и текста с абсолютного на относительное, фиксированное и т. д., похоже, ничего не работает.
Richard Deeming
Ссылка на ваш сайт была сломана. Я изменил его, чтобы связать с JSFiddle только соответствующие части, так что это не похоже на то, что вы просто пытаетесь привлечь больше посетителей на свой сайт.
Richard Deeming
Вы используете абсолютное позиционирование и преобразования для позиционирования вашего текста. Это сработает только в том случае, если вы посмотрите на него в точном размере, в котором он был спроектирован. Как только вы измените размер окна, вы получите странные эффекты, которые вы видите.
Есть гораздо лучшие способы позиционирования контента. Можете ли вы дать нам приблизительное представление о том, как вы хотите, чтобы это было изложено?