How to align center the Add 2 Calendar Button?

[BrettHoebel]

I am unable to align center the Add 2 Calendar button and I don't see any short code on how to do that in the installation guide. Any suggestions on how to align the Add 2 Calendar button in Word Press Divi would be appreciated.

[jekuer]

Hi there,

The button is rendered as block element. This makes it block the full line, while the visible element flows to the left.
You can change this behavior by setting the attribute inline or inline="true". This makes it render inline-block instead. You are then able to control it a little better and usually this is enough to properly align it.

If you are still experiencing problems, you should check the surrounding container. If possible, assign it the display:flex; via css. You can then even position the block style element in a more detailled manner (for example via display: flex; justify-content: center;).

All the best!

[jekuer]

@holyl , try not to use the inline option, but wrap the element in another container, which you then could center. OR you could add style="display:block" to the tag (not sure how you are using it as this would not be easily possible with WordPress shortcode or Block).

[holyl]

Hi I tried both, blick and shortcode. As for now, I´m using the Block. I have added the suggested style tag but no effect so far. Do you have any other ideas to try? Vielen Dank :-)

[jekuer]

When using WP Blocks:

1. click the button.
2. click the 3 dots.
3. hit "group"
4. on the right, "transform to row"
5. at "JUSTIFICATION", center it

[holyl]

Thank you very much for this proposal, unfortunately, this doesn't work either. In the editing window, the position is shown correctly but on the live page the button still sticks to the left. PLZ do you have any other card in your sleeve? BG THX in advance.

[jekuer]

Checking your source code, WordPress is not adding the style, which it should when using the settings from the screenshot above. You can try to change those settings back and forth. Maybe there is some weird caching issue. Or another plugin mixing things up.

You could also try the shortcode block, put it into a row and center. Maybe this works.

Alternatively, you could use the HTML block and do something like this:

<div style="display:flex;width:100%;justify-content:center;">
  <add-to-calendar-button name="Mistrovství a Klání" description="Play with me!" startdate="2024-06-15" starttime="08:00" endtime="18:00" timezone="Europe/Prague" location="Vimperk" options="'Apple','Google','iCal','Outlook.com'" buttonstyle="round" size="3" label="Přidat do kalendáře" lightmode="bodyScheme" language="cs"></add-to-calendar-button>
</div>

[holyl]

Hi Jens,
The thing with the HTML code worked finally. Herzlichen Dank for you effort and the outstanding support you´ve provided to me!

[jekuer]

You're welcome