How to center heading?

I am trying to center an H2 heading but the result I get is something that looks like this in the reading mode:


When I’m in the editing mode, I see this and it looks normal to me:

<center> ##1.</center>

In other words, in reading mode, the ## is not being interpreted as H2 heading, but rather simply as hash signs. The text is correctly centering though. How do I fix this? And why is Obsidian, it seems, misinterpreting the markup?

That is because Obsidian doesn’t allow mixing HTML markup code with markdown code. Have you tried using <h2> tags instead of ## ? Like <center><h2>...</h2></center> ?

Or you can ditch the <center> tags altogether and use a CSS snippet that centers all ## titles.

The parsing of html syntax along with markdown is documented in GitHub Flavored Markdown Spec. Basically html along with nested markdown is not possible. However you can use html inside headings like # heading <input type="checkbox">.

Usually when using Obsidian you are not expected to specify any note‑specific formatting while writing content. By far more common is to specify global styling for every note using Themes or CSS snippets. However Obsidian allows individual note styling using cssclasses property. Usually cssclasses property is used in templates where CSS‑code has been written specially for that template. Writing CSS for individual notes is extremely clunky and unrecommended. In general if individual note styling is desired then Obsidian isn’t right choice for that purpose. Individual note styling can include inline formatting such as font, underline, subscript, superscript and text color—specifying these in the writing process in Obsidian is possible but extremely unrecommended since other free software is available for that exact purpose.

In some cases Obsidian users may want to use some restricted and fixed set of inline formatting syntax available using html. Usually such syntax is verbose but at least underline <u>text</u> and comments <!--text--> have simple syntax. Community plugins can be used to add extended inline formatting to Obsidian. However when content from Obsidian is desired to be shared as pdf files then using MS Word or Google Docs is highly recommended. In general there are no obvious ways to convert markdown to docx and complex software such as Pandoc must be used to convert markdown to docx which can then be opened in MS Word or Google Docs—related feature request: Copy-and-paste rendered version (no markdown) from the editor.

Do you want to center one or all H2 headings?

If you want to change all, that can be done using a CSS snippet, and if you want to change just all H2 heading in one (or some) notes, you can also make a CSS snippet with a class name which you add to the cssclasses property of the notes where you want the centered heading.

In any case, as woofy31 said, you can’t have markdown within html, as described in the official documentation.

1 Like

Ok, I only have a small idea what this means, but nevertheless it is helpful. I am not versed in markup or HTML but I think I know what you’re referring to.

I was using the Editing Toolbar to execute the Center alignment and also to use the heading command. It looks like it is mixing both HTML and markup language.

I don’t really know how to use CSS.

@Muriel To apply text alignment manually while writing in Obsidian, use these syntax:

text alignment in paragraphs:

<p style="text-align:center;">
This text is centered

New paragraph with default alignment—the empty line
above terminates the first paragraph. Markdown may 
not be allowed in the first paragraph

text alignment in headings:

<h2 style="text-align:center;">
This level 2 heading text is centered

Again empty line terminates the heading block—but
the actual heading is only visible in reading view

You can terminate html blocks using </p> and </h> to get rendering in the live preview. Html attribute syntax <tag atr=value> and <tag atr = value> are both equivalent. As I said earlier, applying inline formatting while writing content in Obsidian is very clunky and unrecommended—different word processing tools should be used if extensive inline formatting is desired.

Obsidian doesn’t currently support workflows where second non‑markdown word processing tool is used simultaneously but there is a feature request for it: Copy-and-paste rendered version (no markdown) from the editor.

The value used for style attribute is exact CSS-code with property:value; syntax.

1 Like

It seems like a lot of responses here took things in a different direction. If I read your question correctly, just move the ## to before the center tag and it should work fine. For me,

## Test

## <center>Test</center>

gives this…

Yes this works in reading view—but using formatting tags like <center> is not supported in the latest HTML specification known as HTML5. In markdown the html tag name itself doesn’t matter—every random tags <hello> are supported. It’s unclear how Obsidian handles <center> tags—like is HTML4 used to parse content etc.

Thanks all for your help! I will play around with what you’ve laid out here.

1 Like

I don’t know if this is impacted by the center tag or not, but in your example, it looks like you haven’t formatted the heading markdown properly. There should be a space between the final hashmark and the heading you want to use.

You never answered my question on whether you want this to apply globally or just to some of the headers, but here is another thread which allows you to use just markdown for your headers and then align them using CSS:

Bonus tip: How to add a custom CSS snippet
  • Goto Settings > Appearance and scroll down to “CSS snippets” section, and hit the folder icon on the far right. This opens up a file explorer window, in the folder vault/.obsidian/snippets, which is were you want to save your css snippet
  • In this new window create a file, like myCss.css, where you copy the CSS into. Make sure this actually is a text file, and that the name ends in .css
  • Back in Obsidian, you should now see your myCss in the list of CSS snippets. If not, hit the refresh button
  • Final step is to click the enable button to the right of your file, and now your new CSS should be in effect
  • If you later on make changes in the CSS snippet file, the effect should be immediate. If not, try disabling and re-enabling the snippet, or in some strange cases, you would need to reload Obsidian. In 99% of the cases, the changes are immediate, though.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.