Center button(s) aligning left and stacking vertically

thehikingadventure
(@thehikingadventure)

3 years, 7 months ago
Hi,
Let me preface this with- I am not a developer – and have read thru several forums trying to fix the issue with my buttons aligning left. I used the button blocks and all my buttons were centering until recently.

It’s happening throughout all my posts and I tried entering the different css suggestions but none have worked.

Thanks!
- This topic was modified 3 years, 7 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

devaki09
(@devaki09)

3 years, 7 months ago

There is nothing much to worry, let’s have a look. I would like to know if you have installed a plugins recently. If yes, kindly uninstall the plugins and check for the further results. let me know what goes on.
George Appiah
(@gappiah)

3 years, 7 months ago
WordPress uses CSS flexbox for button containers and many other blocks.

I took a look at your page under the hood, but I don’t see the CSS that WordPress generates to make the parent container for the buttons a flexbox container.

The likely cause of this is when the CSS code generated by WordPress is (erroneously) removed by a caching or optimization plugin as “unused” CSS.

Adding the following CSS should take care of the center alignment issue. Before adding this, be sure to remove any code you previously added that didn’t work.
```
body .is-layout-flex {
 display: flex;
}
```
But note that this is not the only CSS code that should have been generated by WordPress that is missing from your website. So you may want to audit the settings of your caching and optimization plugins (I see W3TC and Autoptimize both active on your site) and ensure you’re not over-optimizing and removing things that your sited needs.

Good luck!
Thread Starter thehikingadventure
(@thehikingadventure)

3 years, 7 months ago
@gappiah
Thank you for your advice. I added the code to the Theme Customize> Additional CSS Classes. (Active Theme- Divi Child)

It doesn’t seem to be working. Where should I be adding your code?
```
.wp-block-button__link {
  color: #fff;
  xbackground-color: #32373c;
  xborder-radius: 9999px;
  box-shadow: none;
  cursor: pointer;
  display: inline-block;
  font-size: 1.125em;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  text-align: center;
  text-decoration: none;
  word-break: break-word;
  box-sizing: border-box;
}
.aligncenter, div.post .new-post .aligncenter{
text-align:center;
}
h3 {
	color: #009697;
}
.wp-block-buttons.aligncenter {
    justify-content: center;
}
body .is-flex-layout {
 display: flex;
}
```
George Appiah
(@gappiah)

3 years, 7 months ago

I’m not familiar with Divi. I also couldn’t test it out now, as it’s a commercial product. But I expected you to place at APPEARANCE => CUSTOMIZE => ADDITIONAL CSS.

I don’t see the code on your site at all, irrespective of where it was placed.

That said, the code wouldn’t do anything even if it appeared on your site… because the HTML markup of your page has changed.

Earlier, the markup for the 3 buttons looked like this:

Note the is-flex-layout among several classes on the parent container containing all the buttons (highlighted line). This is what the code I gave you was targetting.

Now it just looks like this:

Notice several classes on the parent container are missing now.

I don’t know what happened between then and now.

I also don’t know how Divi Builder, a 3rd-party commercial page builder, interacts with WordPress’s own block editor. I don’t even know exactly where and how you author your posts: with the Divi Builder or WordPress’ own editor?

For a test, I just used the WordPress native block editor to publish a post with 3 buttons just like yours, and the buttons centered beautifully as configured: