How to align images using CSS classes

The two latest templates that I have released, Variant Creative and Variant Whitespace, both have CSS classes added for aligning images in the text content. I have used similar classes in older templates as well, but since Variant Creative I am using the same class names as are used in WordPress to make the classes easier to remember. The classes are called alignleft, alignright and aligncenter, and this is what they look like in Variant Creative:

#content img.alignleft {display:inline; float:left; margin:5px 15px 5px 0;}
#content img.alignright {float:right; margin:5px 0 5px 15px;}
#content img.aligncenter {display:block; margin:10px auto;}
#content img.border {background:#ccc; border:4px solid #f0f0f0; color:#333; padding:1px;}

Adding the alignment class

The sample image in the content of the Variant Creative template is shown using this image tag in the file index.html:

<img class="alignright" src="img/test.jpg" height="225" width="300"
alt="Example content image using the class .alignright" />

The alignment class is already added, making the image positioned to the right while the following text paragraphs appear to the left of the image. The part of the image tag that decides this is the class=”alignright” In the secondary HTML file of Variant Creative (2-columns.html), the sample image tag looks the same but with image class=”alignleft” which makes the image positioned to the left and the following text to the right of the image.

No example for the class=”aligncenter” is included, but it places the image in the center of the available space – and pushes down the following text content below it. Editing the class in the HTML moves the images, and removing the class from the HTML gives you the default positioning (which often doesn’t look very good).

Bonus class: .border

The fourth class in the CSS code above doesn’t have anything to do with positioning, it is just an added style for giving images a kind of frame. To apply it, add it as a second class in the image tag like this:

<img class="alignright border" src="img/test.jpg" height="225" width="300"
alt="Example content image using the class .alignright" />

…and it gets a border.

Customizing the classes

These classes will appear in future templates as well, and they can be modified to suit your needs. Change appearance as needed, just make sure to keep the float in the .alignleft and .alignright and the “auto” margin in the centered class, as those are the parts that define the alignment in relation to the content that follows the images.

tutorials, variant creative