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

Question

我正在使用reveal.js并试图理清如何将我的幻灯片强制到页面的最左上角。这似乎应该是直截了当的，但是当我使用Element检查器时，它会彻底改变页面，我甚至无法开始将幻灯片移动到顶部。

将此添加到我的主题：

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

把它搞得一团糟（reveal.css的填充设置为20px 0）但每张幻灯片的顶部还有空白区域。

Answer 1

将幻灯片移到顶部只是reveal_js的configuration option。

Reveal.initialize({
    center: false
}

我还没弄明白如何将它们移到左边。

水平对齐可以从CSS完成：

.reveal .slides { margin: 0; }

Answer 2

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

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

这将div设置为从顶部开始的第0个像素和从左侧开始的第0个像素。显然，如果你想要一些分离，你可以改变这些数字。

Answer 3

如果没有一些代码可以解决这个问题有点难以理解，但我想到了这一点。希望能帮助到你。如果我走错路，Ans会纠正我

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

EDITED FIDDLE

这将它放在左上角，然而，在屏幕缩小一定大小后，它确实会移位。但似乎它受到了JSFiddle响应的影响。您可以使用@media（min-width：### px）来控制它，但是当屏幕增加大小时它不会改变。

希望有所帮助

P.S。坐标绝对放在jsfiddle窗口，在实际应用中使用时可能需要调整

Answer 4

我认为你可以使用下面的CSS在页面上尽可能地获得幻灯片。 -5％并非一直到顶部，但如果你想要更接近，你可以使用更大的数字。

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

Answer 5

很多人使用reveal.js，我想减少每张幻灯片顶部的垂直空白区域。

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

对于每个section标记，脚本会计算并注入css属性top。这是在1761版本3.4.1。

行完成的

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';

祝你好运