Center Image using Markdown

Archive
1

Hi!

Is there way to center images (and text) using Markdown?

I tried the following:

code here

and also

-> code here <-

but neither text nor images are aligned in the center of the page …

Best regards; siren

2

You can use markdown extra with special attributes and put a class on the image. Then center the image with the CSS Class:

![](myimage.jpg)   {.center}

the css:

display: block;
margin: 0 auto;

More information here: https://michelf.ca/projects/php-markdown/extra/#spe-attr

3

Thanks for you answer! Can I enter the CSS directly in the Frontmatter-field or do I need to create a custom.css-file?

4

Or - WHERE and with which syntax can I define the {.center}-class? It is not possible, to enter it directly in the frontmatter-field. In plain HTML I would use STYLE in the head …

5

Find this in the documentation.

6

BTW, there is an assets plugin that lets you dynamically add CSS and JS to a page without using Twig (which you can do also): https://github.com/getgrav/grav-plugin-assets

7

For me it works only with images:

![](logo.png)   {.center}

If I try with text, the webpage shows the code, without changing the alignment:

text   {.center}

Am I missing something?

8

@andreafa Unfortunately not. Adding classes to text paragraphs is not supported in Markdown. You may try it here http://parsedown.org/extra/ to convince yourself and play a little bit around. The only thing you can do is to wrap your contents in a div like

<div markdown="1" class="center">
  Your _centered_ **markdown** content!
</div>
---
9

BTW: See post http://getgrav.org/forum#!/general:center-a-picture-with-grav

10

Thank you, I tried the other solution too, but I get an error
see the post linked above (not to duplicate the request)

11

The error reported on the other post has been fixed, thanks again.

The only syntax that works for me is the one suggested by siren386, with “markdown extra within a container”:

<div align=“center”>
<div markdown=“1”>
# Some markdown syntax here and/or use images:
![](001.jpg)
![](002.jpg)
</div>
</div>
---