【问题标题】：How can I get left-justified paragraphs in reveal.js?如何在reveal.js 中获得左对齐的段落？
【发布时间】：2014-01-09 11:52:02
【问题描述】：

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

【问题讨论】：

标签： reveal.js

【解决方案1】：

解决方案

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

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

左对齐所有段落。

潘多克

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

【讨论】：

【解决方案2】：

如果您开始更改 CSS 选项，您不妨直接在主题的 CSS 文件中进行更改，其中大部分内容都已定义。

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

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

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

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

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

【讨论】：

【解决方案3】：

在部分中使用此代码：

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

【讨论】：

如果您想更改特定幻灯片，此解决方案很有帮助！我确实发现，如果我将整个演示文稿的样式设置为左对齐，我不能使用这种方法来覆盖和居中对齐另一张幻灯片。但是，如果您想左对齐文本幻灯片和居中图像幻灯片，此解决方案效果很好！

【解决方案4】：

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

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

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

这很好用，但现在我所有的 <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]

【讨论】：

解决方案

更多示例

潘多克