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

Question

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

19

我正在使用reveal.js，并尝试解决如何强制幻灯片出现在页面的左上角的问题。这似乎应该很简单，但是当我使用元素检查器时，它会对页面进行如此大的更改，以至于我甚至无法开始定位如何将幻灯片上移至顶部。

将此添加到我的主题中：

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

将其稍微增加了一点（reveal.css中的填充设置为20px 0），但每个幻灯片顶部仍有空白间隙。

- Amanda

5个回答

3

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

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

这将把 div 设置为距离顶部和左侧的第 0 个像素。显然，如果您想要一些间隔，可以更改这些数字。

- tywalker

很遗憾，似乎不起作用。什么也没有显示。简单示例请参见 jsfiddle.net/x2neT/1 - Amanda

Reveal.js 影响了你的部分代码...不确定在哪里。我得阅读源代码才行。我无法调整部分的高度、宽度或任何其他东西，只能调整颜色。这就是为什么手工编写这种动画可能更有用的原因。归根结底，你知道写了什么，影响了什么。如果你一定要使用 reveal.js，https://github.com/hakimel/reveal.js/blob/master/css/reveal.css 你将不得不改变样式。 - tywalker

2

没有代码示例很难理解，但是我想到了一些可能有用的内容。希望能对你有所帮助，如果我偏离了方向，请纠正我。

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

编辑后的JSFIDDLE

这将把它放在左上角，但是在屏幕缩小到一定大小后，它会发生移动。但似乎受到JSFiddle响应性的影响。您可以使用@media (min-width: ###px)来控制此问题，但当屏幕增大时，它并不会改变。

希望有所帮助

附注：坐标是绝对放置在JSFiddle窗口中的，这在实际应用中可能需要进行调整。

- LOTUSMS

不幸的是，那似乎行不通。 - Amanda

好的，我在没有看到任何代码的情况下盲目尝试。你能提供一个fiddle吗？ - LOTUSMS

http://jsfiddle.net/x2neT/1/ 显示了问题； http://jsfiddle.net/x2neT/3/ 展示了如何在您的CSS中（或者Tywalkers的CSS中）破坏它。 - Amanda

我正在更新我的回答。 - LOTUSMS

2

许多使用reveal.js的人都希望减少每张幻灯片顶部的垂直空白间隔。

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

实际上，对于每个

标签，脚本计算并注入css属性。这是在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';

祝你好运

- bioinfornatics

1

我认为您可以使用以下CSS将幻灯片向页面顶部移动。-5％并不是完全到达顶部，但如果您想要更靠近，则可以使用更大的数字。

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

- Terry Brown

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- riezebosch · Accepted Answer

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

Reveal.initialize({
    center: false
}

~~我还没想出如何将它们向左移动。~~

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

.reveal .slides { margin: 0; }