Align center images

Support
#1

Hey guys,

i try to center all my images on my page horizontally and vertically. I tried many things for it, but nothing really seems to work properly. On dev.fenner-musik.de there are two different situations where i struggle.

  1. When I have 2 colomns like in the section “Über Fenner”. I want the image to be horizontally in the middle of the colomn and vertically in the middle of the text of the the other colomn.

  2. Same thing in the blue quotations (i used the quotations shortcode. I want the picture to align properly center according to colomn and text in other colomn.

Thanks a l ot in advance. :slight_smile:

Florian

#2

Hi Florian,

Click center text on the element where your elements are placed.

If you have added any style for the width of your elements, also add margin: auto; to the style box.

Hope it helps!

#3

Hey Joao,

it worked for the quotations horizontally. I still need the vertical “centeriziation”

For the colomns, the problem is, that then both colomns get horizontally centered. And still the question of the vertical centering.

thx man

#4

Hi There,

You can add a gap element above the image…

Regarding - “For the columns, the problem is, that then both columns get horizontally centered. And still the question of the vertical centering.” can you calrify?

Thanks

#5

You can use flex.

apply this to the ROW:

display: flex; justify-content: center; align-items: center;

#6

You’re welcome.

#7

Wow, very nice of you! :slight_smile:

Now the quotation jumps in the middle which is great. The Images still stay on top of the section. :confused:
e.g.: dev.fenner-musik.de/#zitatjoris

#8

Hi There,

Did you try adding a gap above the image as suggested?

Thank you

#9

Hey Joao,

yes, that works but I search for something percent-based, so it is more responsive. Any idea?

#10

Hi There,

You can set the size of the gap using %

You also can set padding or margin on top of your image using the style box, but there is really no much difference, and the gap has the benefit you can hide based on screen size.

Hope it helps

#11

Ok, cool, thank you.

#12

You’re welcome, glad we could help.

Cheers!