Custom styling a header in sphinx website

Question

I want to centre-align and additionally bold the header in a sphinx website, defined in a markdown file as:

# MyHeader

I have tried putting

.center h1 {
    text-align: center;
}

in _static/css/custom.css but it does not work (other css in this file is working).

Ideally I would like to use HTML directly e.g.

<h1 style="text-align: center;"><b>MyHeader</b></h1>

This works great to render, but all of the titles are set to <no title> and the page does not appear on the TOC tree. Is there a way to make sphinx recognise this raw html as a header?

Answer 1

To just center all h1s:

h1 {
  text-align: center;
}

AFAIK, Sphinx used MyST for markdown under the hood. Their docs say that if the attrs_block extension is enabled, you can use this markdown:

{.center}
# MyHeader

Which should work with this CSS:

h1.center {
  text-align: center;
}