解决方案

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。

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

Answer 2

如果您开始更改CSS选项，您可以在主题的CSS文件中正确地执行此操作，其中大部分内容都是定义的。

例如，您可以在themes文件夹的“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;">

Answer 4

我正在使用外部降价，并根据我添加的接受答案

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

位于<head>的底部（在所有其他CSS <link>之后）。

这很好但现在我的所有<p>文字都是左对齐的。所以我重新挪用了<h6>标签（对于那些我没有用得太多的标签），用于任何我仍想要居中对齐的“非粗体”文字。

<style type="text/css">
    p { text-align: left; }
    .reveal h6 {
        text-transform: none;
        font-weight: 400;
    }
</style>

我只是在带有6个哈希前缀的markdown中使用它：

######Some non-capitalized, normal weight, centered text

最后我的图片都在<p>标签中，所以它们也是左对齐的，但我希望它们保持居中，只有块文本左对齐。我通过在图像标记上添加前缀为同一行的任何<h>标记，例如，使用<h1>单个哈希前缀：

#![alt text][path/to/my/image.png]