Align Center Images in WordPress with Paragraphs

Posted on September 7, 2014 in WordPress Category

Maybe a lot of you have the problem to align center images in WordPress using paragraphs. I recently updated WordPress to version 4.0 and the backend has an annoying bug where you can't align center images within paragraphs.

That means, when you click the Align Center Icon Align Center Icon in WordPress Backend when your cursor is placed on the same row with your image (inside WordPress Editor), it will add the class "aligncenter" to image instead of adding "text-align: center" to that paragraph.

Fix to Align Center Images in WordPress

The solution for this problem is very simple. You just need to add your image in the editor and move the cursor to a new line.

Now press the Align Center Button Align Center Icon in WordPress Backend then drag and drop the image in that new line.

Now your paragraph has "text-align: center" and your image will be centered. You can see an example image below:

Align Center Images in WordPress with Paragraphs

This is the simplest way and a quick fix to align center images in WordPress using paragraphs, but there is a second method by appling CSS to the image class named "aligncenter".

Another Way to Align Center Images in WordPress

If you click on the image and hit the Align Center icon inside the editor, it will give to that image a class named "aligncenter", or left "alignleft" and right to be "alignright".

For class "aligncenter" you should write in your theme styles the following CSS code:

.aligncenter {
	margin: 15px auto;
	display: block;
	text-align: center;

This trick will only align center images in WordPress with the class "aligncenter". It will work great with responsive images too!

Related Articles
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

+ 2 = three

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.