Unable to align image to the center

[mmonfared]

Hello, thank you for providing this clean and beautiful Hugo blog theme. I'm currently attempting to align an image to the center within MD files, but I've tried several methods without success. The images continue to remain left-aligned. Some of the methods I've attempted include:

<div style="display: flex; flex-direction: row; align-items: center; justify-content: center;">

![Appium Architecture](/images/appium-arch.webp "Appium Architecture")

</div>

or

<div style="display: block; margin: 0 auto; max-width: 100%;">

![Appium Architecture](/images/appium-arch.webp "Appium Architecture" )

</div>

How I can achieve that in your theme? Thank you.

[tomowang]

You cannot use markdown in raw html. I put one example in image process page

https://github.com/tomowang/hugo-theme-tailwind/blob/main/exampleSite/content/post/image-process/index.md?plain=1#L14-L16

<p align="center" width="100%">
    <img src="./images/logo.png">
</p>

and the demo site: https://hugo-theme-tailwind.tomo.dev/post/image-process/

[mmonfared]

@tomowang Thank you for your response and for adding a sample.
I exactly did the same but unfortunately, it didn't work as expected (pure HTML code doesn't show).
Here is my code:
https://github.com/mmonfared/monfared-io-blog/blob/master/content/posts/1-appium-gestures-part1/index.md?plain=1#L25-L27
And live result (there should be two images related to Appium Architecture and the second one should be centered, but there aren't any other images here):
https://blog.monfared.io/posts/1-appium-gestures-part1/
Also In the customized forked module I added to the project, I just updated the logo and assets, nothing else.
Comparing forked/main with yours/main:
main...mmonfared:hugo-theme-tailwind:main

Could you please take a look and let me know why it doesn't work as expected?

[tomowang]

I find the issue.

1. The default markdown setting will ignore the raw html element and put <!-- raw HTML omitted --> in output result. So add the settings like

https://github.com/tomowang/hugo-theme-tailwind/blob/main/config/_default/hugo.toml#L19-L21

or refer to the settings in exampleSite (the merge=deep will merge the default setting from theme, see https://gohugo.io/getting-started/configuration/#merge-configuration-from-themes)

https://github.com/tomowang/hugo-theme-tailwind/blob/main/exampleSite/config/_default/hugo.toml#L14-L15

2. Use relative path for images, or the images should be put in static folder.

<p align="center" width="100%">
    <img src="./images/1-appium-arch.webp">
</p>

And this is the result:

[mmonfared]

Many thanks for your investigation. The issue is resolved now!