Buttons no longer centered

Another thing to add: Gutenberg buttons are basically broken now. I don’t know if my theme needs to come out with a compatibility update for 5.7, but:

– on one of my themes, buttons do not center properly
– on another one of my themes, buttons are completely broken: they can’t be arranged horizontally and justify content doesn’t work at all

You need to add a url for the page you are having problems with. Without knowing the theme and what css has been attached to your page it not possible to trouble shot.

This is one example where the buttons don’t center in the live view: https://petcitadel.com/best-dog-beds-for-large-breeds

Please note that I’m not a developer or overly techie.

Update: I’m now seeing the buttons centered on the page I linked, although I didn’t before, even after clearing all caches and cookies. The buttons also appeared uncentered on another device.

However, on another one of my sites with the same theme, when I create a button in the Gutenberg editor and “center-justify” it, it doesn’t appear centered in the live view (preview, so can’t link it).

So, I don’t know if these are visual glitches or what.

Hello,
I have the same problem. I just upgraded to WordPress 5.7 and all the buttons I had centered have been left aligned. Any solution?

At the moment I have solved it by adding a class:

.aligncenter {text-align:center;}

The same to me

I have the same problem. I just updated the core on a very simple website with one button that should be centered. Npw, when I try to edit it in the block editor and select the Align Center option, it immediately reverts back to being left aligned. If I try editing as HTML to add the aligncenter class to the button, I get a “this block contains invalid content” warning.

The page and button in question is the “Email me today!” button on this page: https://kjohnstondesign.com/. It’s centered now because I added additional CSS to it in order to force the correct alignment.

I tried making a new button, but when I did, there is no visible option for selecting alignment. Adding “aligncenter” or “alignright” in the HTML editor does nothing.

I went into another site I maintain that also upgraded to 5.7 but has a totally different theme. I am seeing the same behavior on that site when I try to create a new, center-aligned button.

Now all of the buttons on all of my websites appear uncentered. I’m not a web developer at all and have hardly any clue about writing code.

Is there a GitHub page on this issue? What is the best fix? I normally just use Custom HTML blocks to add my buttons because I find the Button blocks clunky, not to mention they add extra space underneath that I don’t want.

I don’t know if this is related to theme compatibility or is an issue inherent to 5.7. Can someone help us out?

I’m having the same issue. https://www.lowenadco.co.uk

On the edit page buttons are centered but not on a live page. You can align the button right and it will appear right but aligning the button centre results in it aligning left.

WP, Themes and plugins all update but I noticed this after the 5.7 update and before I updated themes and plugins.

I’ve also tried creating new blocks but get the same issue.

What theme do you have? I ocean wp, and elementor plugin if it also happens with other themes in my opinion the problem is wordpress, and of the update

Probably.

Can someone provide some clarity here? Does the code “class=”wp-block-button aligncenter” no longer work?

Hi, I am facing the same issue on my website. Here is an example of the page:

https://knowvation.in/current-affairs/monthly-current-affairs-2021/

https://knowvation.in/

You can see that the button are left aligned. I have aligned them centre multiple times, but they just remain on left. While I am logged into my website’s wp-admin, I see that buttons are left aligned, but to audience, it is left aligned on all pages.

Please help me. I am not a developed, just a basic WordPress users.

Thanks!

Amazing that it’s been over a week and not one person has popped in to shed some light on this. This is a serious issue that can have a major negative impact on conversions.

How exactly are non-developer WordPress users supposed to go about fixing something like this? Theme support?

I’ve also noticed the recent 5.7 update does force the buttons inside to not be center aligned, even if this is specified in the editor.

It looks like the minified styles for the blocks is this:

.wp-block-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

… the aligncenter rule is only setting the text-align property, which doesn’t seem to work:

.wp-block-buttons.aligncenter {
    text-align: center;
}

This seems to work for me:

.wp-block-buttons.aligncenter {
    justify-content: center;
}