{"id":4600,"date":"2022-08-19T04:46:49","date_gmt":"2022-08-19T10:46:49","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=4600"},"modified":"2023-04-14T09:57:39","modified_gmt":"2023-04-14T15:57:39","slug":"center-button-wordpress-editor","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/center-button-wordpress-editor\/","title":{"rendered":"Center a Button with the WordPress Editor"},"content":{"rendered":"\n

The Buttons block in the WordPress editor helps prompt visitors to take action. For example, you can use it to link to other pages on your website, an external page, or your social media accounts<\/a>.<\/p>\n\n\n\n

They are great for emphasizing the most important thing you want visitors to do\u2014which, in marketing terms, is known as a definitive call to action<\/a>.<\/p>\n\n\n\n

Adding a button to a page or post on your website is relatively easy. Click on the + Block Inserter<\/code> icon, search for \u201cButtons,\u201d and click it. Once you add your first button, you can type what you\u2019d like the button to say.<\/p>\n\n\n\n

Below is a sample button added with the block editor:<\/p>\n\n\n\n

\n
Button Aligned Left<\/a><\/div>\n<\/div>\n\n\n\n

There might be instances where you wish to center the button. Traditionally, this has not been easy with WordPress as it required the use of HTML and CSS\u2014something that conflicts with the growing \u201cno-code\u201d movement.<\/p>\n\n\n\n

How to Center a Button with the WordPress Editor<\/h2>\n\n\n\n

To center a button (or group of buttons) on your page, start by following the steps above. Once you have your button(s) in place, click the Change items justification<\/code> icon in the toolbar and select Justify items center<\/code>.<\/p>\n\n\n\n

Here is a screenshot that shows the appropriate option selected:<\/p>\n\n\n\n

\"Center<\/figure>\n\n\n\n

Below is a sample button (aligned center) added with the block editor:<\/p>\n\n\n\n

\n
Button Aligned Center<\/a><\/div>\n<\/div>\n\n\n\n

A website might often prefer to display two calls to action\u2014a soft call and a hard one. Examples of this might be \u201cLearn More\u201d and \u201cGet Started.\u201d<\/p>\n\n\n\n

Below are two buttons (aligned center) added with the block editor:<\/p>\n\n\n\n

\n
Learn More<\/a><\/div>\n\n\n\n
Get Started<\/a><\/div>\n<\/div>\n\n\n\n

You might wish to add a \u201cLet\u2019s Connect\u201d section on your website and display a group of links to your social media profiles.<\/p>\n\n\n\n

Below are three buttons (aligned center) added with the block editor:<\/p>\n\n\n\n

\n
Twitter<\/a><\/div>\n\n\n\n
Instagram<\/a><\/div>\n\n\n\n
LinkedIn<\/a><\/div>\n<\/div>\n\n\n\n

Lastly, a short video tutorial shows you how to center buttons.<\/p>\n\n\n\n

\n