Center an image

support
1

Hello huguys (and sorry for the terrible pun), I’m new to this great site builder.

I would like to know the best way to horizontally center an image in its container. I am using the Ananke theme including the Tachyons CSS lib.

Here is my train of thoughts:

  • Centering an element in CSS means either to:
    • (1) give it auto margins and display block, or
    • (2) give the parent element a flex display and a justify-content center.
  • Markdown doesn’t enable styling;
  • raw HTML is discarded by Hugo;
  • figure shortcode doesn’t have a style attribute;
  • figure shortcode allows a class attribute which enables me to style with Tachyons; good! but:
    • figure shortcode doesn’t enable the (1)st way because it creates a <figure> element with an <img> element inside, which I just can’t style as I want (anyway I didn’t manage to do so);
    • center and a justify-center Tachyons classes enable the (2)nd way, but then it doesn’t seem right because if I add a caption it is also flexboxed and doesn’t slip under the image. So I’m guessing that I’m not using tools as they were intended. (literally guessing because I’m also new to Tachyons and modern HTML and CSS things such as <figure> and flexbox)

So I guess my questions are:

  • Am I reasoning correctly in the Hugo paradigm?
  • Is it possible to achieve the (1)st way with Hugo?
  • Is there another way that I’m missing?
2

Your question is not about Hugo, but about CSS, you can attribute some classes at whatever you want, figure or img.

3

False and false ? You do styling with markdown attributes. You need the following:

[markup]
[markup.goldmark.parser]
wrapStandAloneImageWithinParagraph = false
[markup.goldmark.parser.attribute]
block = true

Then your content be

![my_image](my_image_address)
{.please-center}

then you give it automargin or whatever display value that fits. You can insert raw html thanks to

[markup.goldmark.renderer]
unsafe = true

but there’s no point here.

4

You can resort to shortcodes to do these kind of things. I usually define a default style for images and for all ‘differnt’ images I use a shortcode… but the solution of Tom is even nicer.

5

Exactly the answer I needed, thank you @Tom_Durand, I had missed this part of the docs.

@jhvanderschee I suppose you define a default style through custom CSS.

6

I suppose you define a default style through custom CSS.

Yes, indeed.

7

I do the same thing: I define a shortcode for all the figures/images. There is a default class, and I can specify a custom one. I personally prefer this way, because I need semantic HTML (so not just a img element), but with the Tom’s advice and the render hooks, you can do the same thing.