如何通过CSS在reveal.js幻灯片中将H1标题定位到幻灯片顶部

Question

我正在使用reveal.js创建HTML幻灯片演示。默认情况下（以及我尝试的所有主题），reveal.js会将每个幻灯片的完整内容垂直居中显示。它看起来有点像这样：

我该如何为h1标题或其他reveal.js选择器设置CSS规则，使得

标题保持在幻灯片顶部，同时其余内容仍然垂直居中？我的意思是像这样：

---

我已经尝试了一些方法。

.reveal h1 {
    position: absolute;
}

这样做行不通，因为使用这种方法，标题不能从垂直居中的

中“脱离出来”。

我也尝试了上下级间的更改：

.reveal .slides {
  position: static;
}

我尝试了上面提到的h1 CSS的方法，但是也没能让它起作用。

最后我试了来自一个回答的transform方法，但这个方法也不起作用，可能是因为reveal.js已经在使用transform。

有什么办法可以在reveal.js中实现这个效果吗？

- halloleo

---

只要直接父元素的定位为 absolute 或 relative，你就必须在这个上下文中定位子元素。h1 和 .slide 元素的 CSS 规则是什么样的？ - Cody MacPixelface

@Trollsyn h1目前没有position，.reveal.slide在reveal.css深处有{backface-visibility: hidden;} - 不确定这是否有帮助。 - halloleo

你正在使用Safari浏览器和IOS设备查看幻灯片吗？ - Vo Kim Nguyen

@VoKimNguyen 不，是在Linux和Windows上的Firefox。 - halloleo

Answer 1

通常情况下这是不可能的，但有一些我认为有点hacky的方法可以做到。您可以在父级元素的父级元素上应用3D变换。这将强制浏览器在单独的层中绘制父级元素，从而影响position: fixed子节点。

所以像这样的东西应该可以工作：

.reveal {
    transform: translate3d(0,0,0);
}
.reveal h1 {
    position: fixed;
    top: 0;
    left: 0;
}

然而，您最好的方法是将<section/>设置为position: static（您仍然可以使用display: flex垂直居中它），并在<h1/>上使用postion: absolute。

- Slim

---

我尝试了你的transform建议，但好像并没有起作用：h1仍然与幻灯片内容的其余部分一起上下移动。(顺便说一句，抱歉回复晚了。我没有在拥有幻灯片演示文件的机器旁边。) - halloleo

可能的问题是幻灯片本身有一个3D变换。 - Slim

是的，我想是这样。- 我尝试了第二种方法（在“section”上放置“position：static”并在“h1”上使用“position：absolute”），但然后所有元素都飞到了浏览器的顶部！ - halloleo

Answer 2

我能够通过添加以下代码来调整这里https://revealjs.com/#/1的reveal.js示例代码：

section {
    display: flex !important;
    flex-direction: column;
    top: unset !important; 
    height: 100vh;
}

section p {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

HTML代码如下：

<section class="present" style="top: 189px; display: block;">
    <h2>Hello There</h2>
    <p>
        reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
    </p>
</section>

我添加的上述CSS将使段落在考虑了

标题后剩余的空间中居中。

要使段落忽略标题的大小，让其居中于页面上而不管标题的位置，您可以尝试像这样包装标题：

<div style="position: relative;">
    <h2 style="position: absolute;">Hello There</h2>
</div>

希望这有所帮助。有没有什么方法可以添加一个额外的元素（无论是像我展示的那样包装h2，还是在h2内部）来实现这样的效果？

- stickyuser

---

谢谢。我明天会测试这个。我猜这个解决方案可以适用于H1标题，就像适用于H2标题一样。 - halloleo

是的，它可以适用于任何一个，无论是h1还是h2都没有关系。 - stickyuser