Search code examples
htmlcssrr-markdownioslides

Centering the title of an ioslides slide in RStudio

I'm making a quick presentation in RStudio using a new Rmarkdown file, and I've set it to output an HTML file using ioslides. Here's what I've got:

---
title: "SX MWE Presentation"
author: "John Doe"
date: "Today"
output:
  ioslides_presentation:
    smaller: yes
    widescreen: yes
    transition: "faster" 
---

## Plan

Here's the plan: I'm going to give one speech today and another next Monday. 

## Today's Speech 

## Today I'll be talking about A B and C. 

## Next Monday

## Next Monday I'll be talking about X Y and Z.

Here's my question: I'd like to have the slide title text in ## Today's Speech and ## Next Monday slides be centered horizontally and vertically. How do I do that? You'll see immediately that these are just slides with no content, just a title, but that's intentional: I just want a couple of "setup" slides to anchor where we are.

My suspicion is that, to center those slide titles on the slide, I need a custom css file of some kind, but I've been unable to find the code I think I'm looking for. (Of course, I've looked in the ioslides documentation for answer, but I didn't find one.)

Solution

  • You can try the following approach:

    After your YAML header, add the following lines:

    <style type="text/css">

h2 {
  text-align: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
}
</style>

    This means that you override the header 2 CSS styles. Your headers now appear in the middle of the screen and you can completely modify your header style with css, e.g. change the color, the font-size ...