Center image/figure in post

[phber]

Hi,

How would I go about centering a figure/image or video in a markdown blog post?

Edit:

I managed to center my image by adding:
{% if include.center %}style="margin:auto; display:block"{% endif %}

to my figure.html, and center=true in my image reference. But is there a better way?

[george-gca]

You can do something like this when including an image. Using markdown and adding custom classes:

![]({{ "/assets/img/7.jpg" | relative_url }}){:style="margin:auto; display:block;"}

Or if you are using the figure.html code from the repo, currently you can add your own classes to it.

{% include figure.html path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %}

You could also extend the figure.html to add support for custom styles like you did. I think yours is a good solution.

[Perian-Yan]

Hi, how to center the image when using figure.html ?

[Perian-Yan]

I know how to center it now, just adding mx-auto d-block in the class. 😅
See https://getbootstrap.com/docs/4.4/content/images/#aligning-images