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

【问题标题】：Can I align reveal.js slides to the top of the page?我可以将reveal.js 幻灯片对齐到页面顶部吗？
【发布时间】：2014-03-17 02:54:47
【问题描述】：

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

将此添加到我的主题中：

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

稍微提高了一点（reveal.css 将填充设置为20px 0），但每张幻灯片的顶部仍有空白。

【问题讨论】：

【解决方案1】：

将幻灯片移到顶部只需 configuration option 的reveal.js。

Reveal.initialize({
    center: false
}

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

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

.reveal .slides { margin: 0; }

【讨论】：

+1 — 对于水平对齐，所有常见的嫌疑人都适用：text-align、margin: 0 auto、position: absolute; left: 50%; margin-left: -[halfWidth]px...
我通过在模板中添加.reveal .slides { margin: 0; } 设法将内容向左移动。
我也必须做 0 边距，但这似乎可以做到。

【解决方案2】：

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

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

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

【讨论】：

不幸的是，这似乎没有做到。什么都没有出现。 jsfiddle.net/x2neT/1 上的简单演示
Reveal.js 正在影响您的部分代码...不确定在哪里。我必须阅读源代码。我无法调整高度宽度或部分的任何内容。只有颜色。这就是为什么手工编码这类动画会更有用。归根结底，您知道写了什么以及影响了什么。如果您对使用reveal.js 不放心，github.com/hakimel/reveal.js/blob/master/css/reveal.css 您将不得不更改样式。

【解决方案3】：

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

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

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

希望对你有帮助

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

【讨论】：

不幸的是，这似乎不行。
好的，我在没有看到任何代码的情况下在黑暗中扔石头。你能提供一个小提琴吗？
jsfiddle.net/x2neT/1 显示问题； jsfiddle.net/x2neT/3 展示了它是如何与您的 CSS （或与 tywalkers，可悲的是）打破的。
我正在更新我的答案

【解决方案4】：

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

问题，一个css样式是从reveal.js脚本中注入的，所以直接使用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';

祝你好运

【讨论】：

【解决方案5】：

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

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

【讨论】：