How to center text with Markdown?

Question

How do you center an item with Markdown? I'm looking for a solution that works in Grav.

Answer 1

Markdown does not support this feature natively, but you can achieve this wrapping Markdown into HTML.

As a rule of thumb, most 'flavors' of Markdown will render this as centered text:

<p style="text-align: center;">Centered text</p>

Specifically for Grav, as their documentation states, you should do these following steps:

in your system configuration file user/config/system.yaml make sure to activate the markdown extra option:

pages:
  markdown:
    extra: true

in your wrapper tag make sure to add the parameter markdown="1" to activate processing of markdown content:

<div class="myWrapper" markdown="1">
# my markdown content

this content is wrapped into a div with class "myWrapper"
</div>

Answer 2

For me it worked with the following hack: adding the tag div on top without closing the div tag. This makes the entire markdown centralized

<div align="center">

Answer 3

When using any element such as a title, you can use an equivalent html tag, for instance

# Title
## title 2

is equivalent to

<h1> Title </h1>
<h2> Title 2 </h2>

With title, for instance, you can align the text using the following attribute:

<!-- title only -->
<h1 align="center"> Title </h1>

<!-- title with div -->
<div align="center"> <h1 align="center"> Title inside div! </h1> </div>

But sometimes you don't want to use HTML, because it butches the capability of using markdown inside it, in these cases, you can use span, which allows you to render markdown inside HTML tags:

<!-- title with span (you can render emojis or markdown inside it) -->
<span align="center"> <h1> :star: My Career: </h1> </span>

Please note that this attribute is deprecated, while it's deprecated, it is also the only one that works with some flavors of markdown, such as Github's markdown