Default WordPress Image CSS

Installed a new theme but for some reason your images aren’t aligning correctly when placed via the Image Media Box or is text-wrapping broken? Chances are there are some CSS issues in your theme’s stylesheet. Open your stylesheet.css using your favorite editor and look for img.alignright, img.alignleft or img.aligncenter as these are the default WordPress image CSS style names given by your WordPress install.

If you do not have any of the names above in your CSS or if you are missing some styles, below is the default styles given when installing a new WordPress installation. You will see the “img” and “a img” styles below which are used for linked images and non-linked images respectively.

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

You can copy the above and paste it into your stylesheet.css or use the above as a reference point for spotting or editing your own stylesheet.

Also note that your theme may use custom naming such as #content img.alignright. This just means that img.alignright is a child style of #content. In other words your theme has an area designated as the content area of which images found in this area and labelled with alignright will get the styles found in your stylesheet.css.

If you are new to CSS the numbers found in “img.alignright {float:right; margin:0 0 1em 1em}” after the “margin:” all deal with spacing. Each number is associated with the four sides of a box and are read in this order; top, right, bottom, left. So “img.alignright {float:right; margin:0 0 1em 1em}” would give some space on the bottom and left-hand side of an image.