Skip to content

quarto revealjs presentations vertically center content in columns #1386

Answered by mcanouil
shannonpileggi asked this question in Q&A
quarto revealjs presentations vertically center content in columns #1386
Jul 13, 2022 · 1 answers · 1 reply

Is there a away to vertically center content within columns in quarto revealjs presentation?

Something like this, where the slide title stays in place in top left, but content within columns is centered.

---
title: "Untitled"
format: revealjs
editor: visual
---

## Quarto

::: columns

::: {.column  width="50%"}
This

is

column 

1
:::

::: {.column  width="50%"}
This is

column 2
:::

:::
You must be logged in to vote

The easy part is to get vertically centered the columns contents (not vertically centered in the slide though).

  1. Columns vertically aligned to the top but content of the columns vertically centered

    See Quarto code + CSS
    /* file: style.css */
    #vcenter {
      vertical-align: middle;
    }
    ---
    title: "Untitled"
    format:
      revealjs:
        css: style.css
    ---
    
    ## Quarto
    
    :::: {.columns}
    
    ::: {.column #vcenter width="50%"}
    
    This
    
    is
    
    column 
    
    1
    
    :::
    
    ::: {.column #vcenter width="50%"}
    This is
    
    column 2
    :::
    
    ::::
    
  2. Columns and content vertically centered
    The tricky part is now to vertically centered <div class="columns">...</div> which is nested in a div with display: block;.

    See Quarto code + CSS
    /* …

Replies

1 suggested answer
·
1 reply

The easy part is to get vertically centered the columns contents (not vertically centered in the slide though).

  1. Columns vertically aligned to the top but content of the columns vertically centered

    Screenshot of Quarto slide with two columns layout where the content is vertically centered
    See Quarto code + CSS
    /* file: style.css */
    #vcenter {
      vertical-align: middle;
    }
    ---
    title: "Untitled"
    format:
      revealjs:
        css: style.css
    ---
    
    ## Quarto
    
    :::: {.columns}
    
    ::: {.column #vcenter width="50%"}
    
    This
    
    is
    
    column 
    
    1
    
    :::
    
    ::: {.column #vcenter width="50%"}
    This is
    
    column 2
    :::
    
    ::::
    
  2. Columns and content vertically centered
    The tricky part is now to vertically centered <div class="columns">...</div> which is nested in a div with display: block;.

    Screenshot of Quarto slide with two columns layout where the content is vertically center and the columns themselves are vertical centered in the slide
    See Quarto code + CSS
    /* file: style.css */
    .v-center-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 90%;
    }
    ---
    title: "Untitled"
    format:
      revealjs:
        css: style.css
    ---
    
    ## Quarto
    
    :::: {.columns .v-center-container}
    
    ::: {.column width="50%"}
    
    This
    
    is
    
    column 
    
    1
    
    :::
    
    ::: {.column width="50%"}
    This is
    
    column 2
    :::
    
    ::::
    
You must be logged in to vote
1 reply
@shannonpileggi

Thank you @mcanouil, these are great solutions!! I really appreciate your time and both options - this is so helpful!

Answer selected by shannonpileggi
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
2 participants