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:

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

Content with an image that is left aligned

Content with an image that is center aligned

Content with an image that is right aligned

• Share
• Tweet
• Share
• Save