Question

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

我目前用于放置它的代码（小文 AND 大，大是Qwigley字体中的第一个）在这里：

<!--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中：

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

如果您运行代码，您可能会弄乱浏览器的大小并注意到文本会互相移动并且奇怪地移动（不要正确缩放）。

任何方法来解决这个问题，以便它正确缩放？（以下链接的网站和代码集示例）

site [警告：有（响亮的）音频]

这里的例子

https://codepen.io/anon/pen/jYZLWJ

Answer 1

我重建了您的codepen以使用flexbox而不是绝对定位。

请参阅Codepen。

即使您决定不使用它，也要在其中玩耍。它可能被证明是一种学习工具，让您了解如果您使用类，管理可以更容易。也不要犹豫是否要添加更多divs。最好添加到许多人并学习如何修剪它而不是添加不足。

我希望这个答案有所帮助。

Answer 2

嗖的一声，我正在大声聆听和平的音乐，你的网站同时扼杀了我的耳朵/吓得我半死不活。但除此之外......：

他们正在彼此重叠，因为你完全按百分比设置它们。因此较小的区域彼此之间的距离较小。而且由于它是绝对的，它们不在同一个流中，因此百分比来自div的边缘，而不是它旁边的链接。

您需要将链接设置为display:inline-block左/右边距以保持适当的间距。这是你最好的选择，因为你的div已经在屏幕上居中。然后，您可以将text-align:center放在div上以对齐其中的内容。

Answer 3

摆脱单个元素的所有内联样式，绝对定位和变换（这会导致链接以较小的屏幕尺寸重叠）。将标题和菜单链接放入包装器，使用text-align: center将它们居中放置并应用绝对位置并仅对其进行转换，使其居中，如下所示：

html,
body {
  background-color: coral;
  height: 100%;
}
.center_wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
}
.x1, .x2 {
  margin: 0;
  text-align: center;
}
.x1 {
  font-family: "Qwigley";
  font-style: normal;
  font-size: 72px;
  color: white;
  text-shadow: 0px 0px 5px white;
}
.x2 a:link,
.x2 a:visited {
  font-family: "Courier New";
  font-size: 14px;
  color: white;
  text-shadow: 0px 0px 1px white;
  text-decoration: none;
  padding-right: 2%;
}

<div class="center_wrap">
  <p class="x1">ndb.life</p>
  <p class="x2">
    <a href="http://steamcommunity.com/id/xfh" rel="noopener
noreferrer" target="_blank">(main) steam</a>
    <a href="#">youtube</a>
    <a href="#">configs</a>
    <a href="#">email</a>
  </p>
</div>

如何修复HTML位置和缩放属性？

3 个答案: