如何在reveal.js中获得左对齐段落？

Question

标准HTML段落以reveal.js为中心显示.我想将此更改为左对齐,就像在普通网页上一样.我已经看过reveal.js演示文稿,但这是如何工作的？

Answer 1

解

您可以通过向演示文稿添加一些自定义CSS来更改幻灯片的显示方式.例如,添加

<style type="text/css">
p { text-align: left; }
</style>

左对齐所有段落.

你只询问左对齐段落,但这里有一些更复杂的例子,以防有人发现它们有用:

重新设计非标题幻灯片的标题部分:

<style type="text/css">
.reveal .slide h1 { font-size: 200%; text-decoration: underline; }
</style>

重新标题标题幻灯片的标题部分:

<style type="text/css">
.reveal .slides .title {
  /* Ugly ... */
  text-shadow: 0px 0px 25px rgb(100,256,0); 
  font-size: 300%;
}
</style>

reveal.js默认的CSS文件很复杂,例如reveal.css,但我很幸运,只看生成的HTML来弄清楚我的CSS应该针对什么.

如果你使用Pandoc从markdown生成reveal.js幻灯片,所有这些仍然有效,我强烈推荐.在这种情况下,将块放在一个文件中并告诉Pandoc插入它.<style>pandoc --include-in-header=<file with <style> block> ...

Answer 2

如果您开始更改 CSS 选项，您不妨在主题的 CSS 文件中正确执行此操作，其中大部分内容无论如何都已定义。

例如，您将在主题文件夹的“sky.css”文件中找到它。

.reveal p {
  margin: 20px 0;
  line-height: 1.3; }

只需添加 CSS 片段“text-align: left;” 为此，您的段落将根据需要对齐：

.reveal p {
  margin: 20px 0;
  line-height: 1.3;
  text-align: left; }

将该 CSS 重命名为“mysky.css”之类的名称并链接到幻灯片标题中的新主题可能是有意义的。这样，如果遇到问题，您可以随时切换回原始主题。根据我的经验，这非常有效。

Answer 3

在部分中使用此代码：

<section style="text-align: left;">