我可以将reveal.js幻灯片对齐到页面顶部吗？

Question

我正在使用reveal.js，并试图弄清楚如何强制我的幻灯片到页面的最左上角。这看起来应该很简单，但是当我使用元素检查器时，它从根本上改变了页面，以至于我什至无法开始将幻灯片移至顶部的归零。

将其添加到我的主题中：

.reveal .slides>section,
.reveal .slides>section>section {
    padding: 0;}

稍微提高了一点（reveal.css 将填充设置为

20px 0

），但每张幻灯片的顶部仍然有空白。

Answer 1

将幻灯片移至顶部只是reveal.js 的一个配置选项。

Reveal.initialize({
    center: false
}

~~我还没弄清楚如何将它们移到左边。~~

水平对齐可以通过 CSS 完成：

.reveal .slides { margin: 0; }

Answer 2

如果您希望幻灯片在滚动时保持在同一位置，则可以使用固定定位。但如果你想让它们保持在顶部，你需要使用绝对定位。

.slides {
    position: absolute;
    top: 0;
    left: 0;
}

这会将 div 设置为从顶部算起的第 0 个像素和从左侧算起的第 0 个像素。显然，如果您想要一些分离，您可以更改这些数字。

Answer 3

如果没有一些代码可以使用，有点难以弄清楚，但我想到了这一点。希望能帮助到你。如果我走错路了，请纠正我

var d = document.getElementById('slides');
   d.style.position = "absolute";
   d.style.left = "230px";
   d.style.top = "207px";

这会将其置于左上角，但是，在屏幕减小一定尺寸后，它会发生移动。但它似乎受到 JSFiddle 响应能力的影响。您可以使用 @media (min-width: ###px) 来控制它，但当屏幕尺寸增加时它不会改变。

希望有帮助

附注坐标是绝对放置到jsfiddle窗口的，在实际应用中可能需要调整

Answer 4

正如许多人使用reveal.js一样，我想减少每张幻灯片顶部的垂直空白空间。

问题是，css 样式是从reveal.js 脚本注入的，因此直接使用css 来解决此问题将失败，因为脚本将提供这些默认值。

事实上，对于每个

section

标签，脚本都会计算并注入 css 属性

top

。这是在版本 3.4.1 的第 1761 行完成的。

slide.style.top = Math.max( ( size.height - slide.scrollHeight ) / 2, 0 ) + 'px';

所以你必须改变计算以获得你的预期结果。成为最顶尖的：

slide.style.top = 0;

要减小大小，请增加除数值（默认为 2），这里我使用 3:

slide.style.top = Math.max( ( size.height - slide.scrollHeight ) / 3, 0 ) + 'px';

祝你好运

Answer 5

我认为您可以使用下面的 CSS 将幻灯片移动到页面上任意位置。 -5% 并不是一直到顶部，但如果您希望更接近顶部，您可以使用更大的数字。

.reveal p:first-child { margin-top: 0px; }
.reveal .slides > section { padding: 0px; }
.reveal div.slides { position: absolute; top: -5%; }