How to set image center?

support
1 
![image](image) always left.

How to set center?

2

You set the style of the image in CSS.

3

How about adding .center class and creating Hugo Shortcodes. The following is a simple example.

.center class

.center {
  text-align: center;
}

Hugo shortcode layouts/shortcodes/image.html

{{ $src := .Get "src" }}
{{ $alt := .Get "alt" }}

<div class="center">
  <img
    src="{{ $src }}"
    alt="{{ $alt }}"
    decoding="async"
  />
</div>

Markdown

{{< image
src="images/sample.jpg"
alt="This is sample image" >}}
4

I think shortcode implementation is less elegant.

Found follow implementation:

My 2 cents solution to get images centered and responsive:

![Title](/your-image-url/image.png#center)

In the css:

img[src$='#center'] {
  display: block;
  margin: 1.0rem auto;
  max-width: 100%;
  height: auto;
}

But I haven’t succeeded yet.

2 Likes
5

Hello this topic is OT here. The forum is for Hugo support questions not about CSS etc.

1 Like