Does markdown support native text-alignment without usage html + css?

2

13 Answers

native markdown doesn't support text alignment without html + css.

9

In order to center text in md files you can use the center tag like html tag:

<center>Centered text</center>

3

I known this isn't markdown, but <p align="center"> worked for me, so if anyone figures out the markdown syntax instead I'll be happy to use that. Until then I'll use the HTML tag.

6

The div element has its own alignment attribute, align.

<div align="center"> my text here.
</div>

3

It's hacky but if you're using GFM or some other MD syntax which supports building tables with pipes you can use the column alignment features:

|| <!-- empty table header -->
|:--:| <!-- table header/body separator with center formatting -->
| I'm centered! | <!-- cell gets column's alignment -->

This works in marked.

2

In Github You need to write:

<p align="justify"> Lorem ipsum
</p>

3

For Markdown Extra you can use custom attributes:

# Example text {style=text-align:center}

This works for headers and blockquotes, but not for paragraphs, inline elements and code blocks.

A shorter version (but not supported in HTML 5):

# Example text {align=center}

1

A qualified 'yes' using table syntax. For example, you can center-align plain text as follows:

| |
| :-: |
| Excerpts from Romeo and Juliet (arr. V. Borisovsky) |

This yields:

Excerpts from Romeo and Juliet (arr. V. Borisovsky)

Note that you can still use Markdown inside an HTML block. For example:

<div markdown="1">
## Excerpts from Romeo and Juliet (arr. V. Borisovsky)
### Sergei Prokofiev
#### Timothy Ridout, viola ∙ Frank Dupree, piano
</div>

For python markdown with attr_list extension the syntax is a little different:

{: #someid .someclass somekey='some value' }

Example:

[Click here](){: .btn .btn-primary }
Lead information paragraph
{: .lead }

I was trying to center an image and none of the techniques suggested in answers here worked. A regular HTML <img> with inline CSS worked for me...

<img alt="photo" src="{{ site.baseurl }}/images/image.jpg">

This is for a Jekyll blog hosted on GitHub

I found pretty useful to use latex syntax on jupyter notebooks cells, like:

![good-boy]( "Good boy on boat")
$$\text{This is some centered text}$$

For most markdown parsers, there is no way to natively align text. A few parsers support this syntax: -> centered <-.

But, if your parser doesn't support it, you can use HTML for that, even allowing you to render markdown inside the tags.

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: ~~Centered~~ </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

To center align, surround the text you wish to center align with arrows (-> <-) like so:

-> This is center aligned <-

9