Center a shortcode

How To
1

Struggling here … How do I center align a shortcode element?

I have a shortcode that contains a Vimeo embed iframe. I want this to appear centered on the page. I’ve tried putting it in sections, blocks, divs and containers in a variety of combinations, then setting the flex align or block align etc. But it always puts the video player left aligned.

If I use the Video element then that aligns as I want, but sadly does not allow me to add a Do Not Track option, hence trying the embed code.

What am I missing?

Thx
alan

2

Putting left and right margin of wrapper to auto doesn’t work ?

3

Thanks, but sadly not. Tried it on all the elements, nothing. I can move the iframe around by using specific margins or padding but thats not ideal. I just thought the flex align center would work.

I assume this is because it is an embeded iframe so the elements end size isn’t known, even though I have the size in the code.

Thx
Alan

4

Try this:
put short code inside rich text element in ‘text’ view, go to style tab :arrow_right: typography :arrow_right: and set text-align to center.
Doing the same in a short code element might work too.

1 Like
5

Brilliant! Just using the Text align on the shortcode works.
Not very intuitive but hey it works.
Thanks you so much for your help.
Cheers
Alan

6

I think if you set display of iframe itself to block in custom CSS. You might be able to use flex box alignment too.

iframe { display: block;}
7

If you need to align the code block to the center, just add the following to the start and end of the embed code:

<center>
</center>
8

make width auto for code/shortcode element and rest is just typical layout building container center

image
image1060×799 48.2 KB