I'm creating a Quarto Revealjs presentation and cannot get the author information to center on the title slide, despite having text-align: center; in my CSS. The title and subtitle center correctly, but the author remains left-aligned.
Minimal Reproducible Example
QMD file (presentation.qmd):
---
title: "Data Visualization"
subtitle: "for Genomics and Biological Sciences"
author: "Dr. Loukas Theodosiou // December 15th 2025"
title-slide-attributes:
data-background-color: "#E8F5F1"
format:
revealjs:
theme: slides.scss
footer: '**GraphAI** // Consultation in Genomics Data Visualization'
transition: fade
progress: true
multiplex: false
preview-links: true
scrollable: false
hide-inactive-cursor: true
highlight-style: printing
pause: true
embed-resources: false
editor: source
---
# Why do we need data visualisations?
Content here...
SCSS file (slides.scss):
/*-- scss:defaults --*/
@import url('https://fonts.googleapis.com/css2?family=Asap:ital,wdth,wght@0,87.5,400;0,87.5,500;0,87.5,600;0,87.5,700;0,87.5,800;0,87.5,900;0,100,400;0,100,500;0,100,600;0,100,700;0,100,800;0,100,900;1,87.5,400;1,87.5,500;1,87.5,600;1,87.5,700;1,87.5,800;1,87.5,900;1,100,400;1,100,500;1,100,600;1,100,700;1,100,800;1,100,900&family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;0,7..72,700;0,7..72,800;0,7..72,900;1,7..72,400;1,7..72,500;1,7..72,600;1,7..72,700;1,7..72,800;1,7..72,900&family=Spline+Sans+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Spline+Sans:wght@400;500;600;700&display=swap');
$font-family-sans-serif: 'Asap', 'Asap Condensed', 'Spline Sans', 'Tahoma', 'Arial', sans-serif;
$font-family-serif: 'Literata', 'Bodoni MT', 'Bodoni 72', 'Georgia', 'Times', serif;
/*-- scss:rules --*/
/* Title - CENTERS CORRECTLY */
h1.title {
font-family: 'Literata', 'Bodoni MT', 'Bodoni 72', 'Georgia', 'Times', serif;
font-size: 1.7em;
font-style: italic;
font-weight: 800;
color: #28A87D;
line-height: 1.07;
text-align: center;
margin-bottom: .4em;
}
/* Subtitle - CENTERS CORRECTLY */
p.subtitle {
color: #606060;
font-weight: 600;
font-style: italic;
line-height: .97;
text-align: center;
}
/* Author - DOES NOT CENTER */
.quarto-title-author {
font-size: .8em;
font-weight: 600;
color: #606060;
font-style: italic;
margin-top: 1.5em;
text-align: center; /* <-- This doesn't work! */
}
.backgrounds .title-slide {
background-color: #c9f2e4;
}
What I've Tried
Adding
text-align: center;to.quarto-title-authorAdding
!importantflag:text-align: center !important;Targeting multiple possible classes:
.quarto-title-author,.quarto-title-authors,.quarto-title-author-nameAdding
width: 100%; display: block;to the CSS ruleWrapping the author in a
with inline styles in the YAML (works but defeats the purpose of using SCSS)Expected vs Actual Behavior
Expected: The author line should be centered on the title slide, just like the title and subtitle.
Actual: The author remains left-aligned despite the CSS rule.
Questions
What is the correct CSS selector for centering the author in Quarto Revealjs?
Is there a Quarto-specific way to control title slide layout that I'm missing?
Could the inline HTML (
tag) in the author field be interfering with the CSS?
Environment
Quarto version: 1.4+ (tested on latest)
Format: revealjs
Browser: Chrome/Firefox (issue occurs in both)