标准的 HTML 段落在 reveal.js 中会居中显示。我希望将其改为左对齐,就像普通网页上一样。我见过这样做的 reveal.js 演示文稿,但是这是如何实现的呢?
标准的 HTML 段落在 reveal.js 中会居中显示。我希望将其改为左对齐,就像普通网页上一样。我见过这样做的 reveal.js 演示文稿,但是这是如何实现的呢?
您可以通过添加一些自定义 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幻灯片,所有这些仍然适用,并且我强烈推荐使用Pandoc。在这种情况下,将<style>
块放入一个文件中,并告诉Pandoc使用pandoc --include-in-header=<file with <style> block> ...
插入该文件。
使用此代码段:
<section style="text-align: left;">
.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"并在幻灯片的头部链接到新主题是有道理的。这样,如果遇到问题,您可以随时切换回原始主题。根据我的经验,这种方法非常有效。
我正在使用外部markdown,根据接受的答案,我添加了
<style type="text/css">
p { text-align: left; }
</style>
<link>
之后,在<head>
底部放置它。这样做很好,但现在我的所有<p>
文本都是左对齐的。因此,我重新适用了<h6>
标签(很少使用),用于任何我仍然希望居中对齐的“非粗体”文本。<style type="text/css">
p { text-align: left; }
.reveal h6 {
text-transform: none;
font-weight: 400;
}
</style>
######Some non-capitalized, normal weight, centered text
标签中,因此它们也是左对齐的,但我希望它们保持居中,并且只有块文本是左对齐的。我通过在同一行上使用任何标签作为前缀来破解这个问题,例如使用单#符号前缀的
#![alt text][path/to/my/image.png]