当我增加字体大小和字母间距时，居中的文本移动到下一行

【问题标题】：My centered text moves to the next line when I increase font size and letter spacing当我增加字体大小和字母间距时，居中的文本移动到下一行
【发布时间】：2020-07-23 09:06:27
【问题描述】：

我希望我的文本在网页中间居中，直到我将大小和字母间距增加到我想要的为止。当我这样做时，即使我有 0 填充并且有足够的空间，第二个单词也会移动到下一行。请帮忙。这是我的文本的 css：

.centered {
    font-family: Seravek;
    font-size: 500%;
    color: white;
    letter-spacing: .16em;
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
}

【问题讨论】：

您应该添加更多代码。它增加了获得帮助的机会

标签： css text font-size

【解决方案1】：

这可能会帮助您将文本居中，我在这里使用了font-size: 500%;，我发现它真的很多，但是您可以将其变小，使文本居中一切都会很好。

* {
margin: 0;
padding: 0;
}

main {
  position: relative;
  background: white;
  height: 200px;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  resize: both;
  overflow: auto;
}

main div {
  background: black;
  color: white;
  width: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: .18em;
  font-size: 500%;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
  resize: both;
  overflow: auto;
}

<main>
  
  <div>
    Center me - Center me -Center me - Center me - Center me - Center me -Center me - Center me - Center me - Center me - Center me - Center me -Center me - Center me
  </div>
  
</main>

【讨论】：