CSS styles for styling image alignment in your WordPress pages and posts

When you create your own WordPress theme, one of the things of provide for is the ability to style image alignments.

By default, the WordPress Editor will include one of the predefined CSS classes when we add images to a post or page.

Therefore, by providing the CSS styles for each of these classes, we will be able to style the image alignment of our WordPress pages and posts.

Given these points, let us look at the CSS styles for styling image alignment in our WordPress pages and posts.

What are the CSS classes that the WordPress editor adds to images inside a post or a page?

The following table shows the CSS classes that the WordPress editor adds to images for different alignments:

Alignment CSS class
No Alignment alignnone
Left aligned alignleft
Center aligned aligncenter
Right aligned alignright

CSS styles for styling image alignment in your WordPress pages and posts

Once we know the CSS classes that the WordPress editor adds to images inside a post or a page, we can define the CSS styling for each of the classes:

img.alignnone {
	float:none; margin: 5px 0 5px 0;
}

img.alignleft {
	float:left; 
	margin: 5px 10px 5px 0px;
}

img.aligncenter {
	display:block;
	float:none;
	margin: 5px auto;
}

img.alignright {
	float:right;
	margin: 5px 0 5px 10px;
}

After you had included the above CSS styles in your WordPress theme, you will be able to align images in your pages and posts with your WordPress editor.

Content with an image having no alignment

Sample WordPress content with an image having with no alignment

Content with an image that is left aligned

Sample WordPress content with an image that is left aligned

Content with an image that is center aligned

Sample WordPress content with an image that is center aligned

Content with an image that is right aligned

Sample WordPress content with an image that is right aligned

About Clivant

Clivant a.k.a Chai Heng enjoys composing software and building systems to serve people. He owns techcoil.com and hopes that whatever he had written and built so far had benefited people. All views expressed belongs to him and are not representative of the company that he works/worked for.

Udemy.com Homepage 300x250 Domain names for just 88 cents!

Find a domain starting at $0.88

powered by Namecheap