Centering image with custom class

Kirby 2 Solved ✅
1

Hey everyone,

i am fully aware of the fact that i can attach custom CSS classes to an image by using the “class: XX” attribute. However the given class is not applied to the <img> tag in HTML but to the surrounding <figure> class. So my attempt to horizontally center an image with margin: 0 auto obviously did not work. Also applying text-align: center to the figure-element did not work.

So i was wondering what is the best practice to center an image using the custom class-argument?

Thanks for your help, sorry for beginner CSS question!

2

text-align:center should work, if the image element is an inline element, if your img is a block element, you’d have to apply margin:0 auto on the image.

3

For example: if you add the ‘class: XX’, which in turn adds a ‘class=“XX”’ attribute to the figure, you can accomplish the centered image with this css:

  figure.XX img {
    margin: 0 auto;
  }
4

Of course! How did i not think of this solution. Sorry, i was obviously very stupid. This solved my problem. Thank you!