How to set image center?

![image](image) always left.

How to set center?

You set the style of the image in CSS.

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">
    src="{{ $src }}"
    alt="{{ $alt }}"


{{< image
alt="This is sample image" >}}

I think shortcode implementation is less elegant.

Found follow implementation:

My 2 cents solution to get images centered and responsive:


In the css:

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

But I haven’t succeeded yet.


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

1 Like