正确缩放我的HTML文本？ [英] Scale my HTML text correctly?

问题描述

我正在我的个人网站上工作，只是学习。我有一个大的主要文本块和我的网站名称，并在其下面有一些链接到我的社交媒体等。问题是大的主要文本块完美地缩放，但它下面的小文本没有。



我目前用于放置它的代码在这里：

I'm working on my personal website, just learning. I have a large, main block of text with my site name, and under it some links to my social media, etc. The problem is the large, main block of text scales perfectly, but the small text under it does not.

The code I currently use for placing it is here:

<!--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上使用的类在我的style.css中：

The class used on the div is in my style.css here:

#center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

自己试一试，只是乱七八糟随着窗口大小和手表随着文本进入彼此并移动奇怪。有什么方法可以解决这个问题吗？



演示 [ ^ ]



我尝试过：



将div和文本的位置从绝对位置更改为相对位置固定等等。似乎无效。

Try it out yourself, just mess with the window size and watch as the text goes inside each other and move weirdly. Any way to fix this?

Demo[^]

What I have tried:

Changing the position of the div and the text from absolute to relative to fixed etc. nothing seems to work.

推荐答案

the class is statr with .(dot) .But you use # .So Instated of #center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

这篇关于正确缩放我的HTML文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！