标准的 HTML 段落在 reveal.js 中会居中显示。我希望将其改为左对齐，就像普通网页上一样。我见过这样做的 reveal.js 演示文稿，但是这是如何实现的呢？
4个回答
40
解决方案
您可以通过添加一些自定义 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通过Pandoc生成reveal.js幻灯片，所有这些仍然适用，并且我强烈推荐使用Pandoc。在这种情况下，将<style>块放入一个文件中，并告诉Pandoc使用pandoc --include-in-header=<file with <style> block> ...插入该文件。
- ntc2
7
使用此代码段：
<section style="text-align: left;">
- Daniel Ikenaga
1
1如果您想更改特定幻灯片，此解决方案非常有用！我发现，如果我将整个演示文稿的样式设置为左对齐，我无法使用此方法来覆盖并居中另一张幻灯片。但是，如果您想要左对齐文本幻灯片和居中图像幻灯片，则此解决方案非常有效！ - June Skeeter
6
如果您开始更改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"并在幻灯片的头部链接到新主题是有道理的。这样，如果遇到问题，您可以随时切换回原始主题。根据我的经验，这种方法非常有效。
- Christof
4
我正在使用外部markdown，根据接受的答案，我添加了
<style type="text/css">
p { text-align: left; }
</style>
在所有其他CSS
<link>之后，在<head>底部放置它。这样做很好，但现在我的所有<p>文本都是左对齐的。因此，我重新适用了<h6>标签（很少使用），用于任何我仍然希望居中对齐的“非粗体”文本。<style type="text/css">
p { text-align: left; }
.reveal h6 {
text-transform: none;
font-weight: 400;
}
</style>
我只是在Markdown中使用它，使用六个井号前缀：
######Some non-capitalized, normal weight, centered text
最后，我的所有图像都被包含在
标签中，因此它们也是左对齐的，但我希望它们保持居中，并且只有块文本是左对齐的。我通过在同一行上使用任何标签作为前缀来破解这个问题，例如使用单#符号前缀的
标签：
#![alt text][path/to/my/image.png]
#![alt text][path/to/my/image.png]
- William Myers
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接