I’m in the process of migrating blog content into Hugo and am having trouble centering images in posts with inline HTML. I tried the following and I’m still getting an image that is aligned left. Any suggestions as to what might be the issue?
<img src="site.gif" style="display=block; margin-left=auto; margin-right=auto; width=50%;"/>
May be look for a HTML/CSS forum because this is not related to hugo.
And then give them your css framework so they can gess.
Let me ask the question a different way. What is the best approach in Hugo for image styling? I’ve seen references to Hugo shortcodes as one approach.
I can’t guess what you are trying to do and your context.
But
Shortcodes are for embeding them in .md files.Partials are for using them in templates.Image stying is HTML & CSS practice that you can put in either shortcode and/or partials/templates
In terms of what I’m trying to do, it’s quite simple: load and display a centered image in a blog post. If there’s a Hugo specific way to achieve that without using inline HTML, I’m all ears.
It turns out the following inline HTML will load and center an image but it is centered with respect to the web browser display as opposed to the text span for the post. And the latter is what I want to produce.
<img src="site.gif" style="display: block; margin-left: auto; margin-right: auto; width: 50%;"/>
CSS styling is off-topic in the Hugo forum.