Do you want to centrally align text in WordPress?
By default when you write text in WordPress, it is automatically aligned to the left. However it does give you the functionality to align it where ever you want with just a few clicks.
In this post I’ll be explaining how to align text centrally in
- WordPress Classic editor
- WordPress Widgets
- And How to align a whole post in the center of a page?
How to Center Align Text In Classic Editor.
Although the classic WordPress editor was replaced by Gutenberg as the default editor in WordPress 5.0 update some people still prefer to use the classic editor for one reason or another.
Here’s how you can center text in the classic editor.
- Select the text you want to aling centrally.
- Click on the ‘Align Center’ icon.
- Alternatively, you can also use the keyboard shortcut Ctrl+Alt+C to align it in the center
Aligning Text In Gutenburg
In Gutenberg, the procedure is almost the same, but the layout is a bit different.
Here’s how to do it.
- Select the text you want to aling .
- Click on align text icon.
- Select the ‘Align Text Center’ option and you are all set.
Aligning Text Using HTML
Occasionally, the above-mentioned methods may not work for one reason or another and you may need to use HTML instead. It’s very easy and simple and requires no coding experience.
Here’s how you do it in just three steps.
- If you are using Gutenberg, click on the three dots right above the block to open the drop down menu. Select the option ‘Edit as HTML’.
- For the classic editor, click on the “Text” in the right upper corner of the screen.
- Now just add the center tag <center> (without slash) before the paragraph
- Add the tag </center> (with slash) after the paragraph
- Switch back to the visual editor and save the settings.
Aligning Text in a Widget
To aling text in a widget, open the widget you want to edit. For that purpose
- Go to appearance.
- Click on the widgets option.
- Select the widget you want to edit.
- Switch to HTML version by clicking on the ‘Text’ button in the right upper corner.
- Add the tag <center> before the text and </center> (with slash)after the text.
- Swith back to the visual editor and save the settings.