当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - reveal.js title slide override

问题描述:

I would like to style my reveal.js very first (title) slide slightly differently than my other slides.

How could I create a separate section environment for "title" slides with:

  1. All headings and text centered?
  2. All contents vertically aligned in the middle?

My default (content) slides should be left-aligned and not vertically centered. This means that in the init part Reveal.initialize({... center: false, ...})

And for my custom theme.css, all headings and paragraph text are left-aligned with text-align: left.

I was hoping there would be some <section data-center=true> override option, but there does not seem to be. I have been fiddling with div's, but I am no great HTML/CSS guru.

As a follow up question, could this be automatically triggered if <h1> is used on a slide? That would allow me to use external Markdown for the contents and nothing else.

网友答案:

Just use a class to namespace your title slide

<section class="title-slide">
    <h1>Title</h1>
</section>

and style it with a higher specificity than the other slides

h1 {
    text-align: left;
}

.title-slide h1 {
    text-align: center;
}

This should address your second question as well without having to trigger anything dynamically.

分享给朋友:
您可能感兴趣的文章:
随机阅读: