Center buttons that won't center
Buttons in WordPress sit inside a Buttons block, which holds one or more Button blocks. You center the group, not each button, and inside some layout blocks the layout decides where buttons go.
Center a Buttons block
- Click the button, then click Select parent block at the left end of the toolbar so the toolbar shows Buttons. You can also select Buttons in List View.
- In the toolbar, click the justification icon and choose Justify items center. The same setting is under Justification in the block sidebar.
- Click Update.
A single Button has no alignment of its own. If you only see width and style options, you've selected the button rather than the Buttons block around it.
If the buttons still won't center
The block around the buttons may be controlling their position. Columns, heroes, and other layout blocks often line up everything inside them, and that setting wins over the Buttons block's own justification. Select the layout block and center its content instead (see below for Dirigible blocks).
A centered button can also look off-center when the column it sits in is narrow or offset. Check the column's width and spacing in List View.
If your site runs on Dirigible
Several Dirigible layout blocks position everything inside them as a group, buttons included. Inside these blocks, set the position on the layout block, not on the buttons:
| Block | Setting |
|---|---|
| Column (in a Dirigible Columns block) | Content Position in the sidebar, or the position button in the toolbar |
| Hero | Text Position |
| Block (a panel in the Blocks block) | Text Alignment |
Each one is a grid of nine spots. Choose the middle row's center spot to center the text and buttons together.
Content set to the right falls back to the left on phones, so right-aligned text stays readable on a narrow screen. Center and left positions stay as they are.
See Columns, Hero, and Blocks for each block's other settings.