如何响应地将文本定位到底部的一半

Question

我目前正在一个网站上处理视差效果，我需要一个段落在页面底部的中途通过。但是由于该段落必须响应字体大小，我不太确定我是否需要将文本转换为图像或坚持使用纯文本来解决这个问题？似乎带有图像的解决方案可以让我用纯 JavaScript 做一些技巧。

总的来说，我觉得很难控制页面上的文本，尤其是对于文本可以出现在不同位置的视差。也许有一些好的工具可用于此目的？

https://jsfiddle.net/pt88w26u/2/

HTML:

<section id="first">
  <div>
    <p>This is a test</p>
  </div>
</section>
<section id="second">
</section>

CSS:

html,
body {
  height: 100%;
  color: #fff;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

section {
  min-height: 100%;
}

#first {
  background-color: #000;
}

#second {
  background-color: #ddd;
}

section > div {
  top: 86%;
  font-size: 5em;
  position: absolute;
  transform: translate(-50%, 0%);
  left: 50%;
}

Answer 1

您只能使用 css 执行此操作。

为此，将 div 的位置和变换设置为 bottom:0px; transform:translate(-50%,50%);

并删除 p 标签上的默认边距。

https://jsfiddle.net/pt88w26u/5/

如何响应地将文本定位到底部的一半

How to position text halfway through bottom responsively

html

javascript

css

parallax