How to align images using CSS classes

Post 190 of 262

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.

,

This article was written by Andreas Viklund

Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.

6 comments:

BenFebruary 13, 2011 at 17:21Reply

Hi Andreas,

First of all your templates are awesome! I’ve been searching for a clean simple template for a long time, and finally found your site. #1 on google search btw.

I have a question for you. I’m using the Variant whitespace, and am having trouble adding a collage of photos in the body of the left column. The collage is 640×640, and when I add it, it obscures part of the navigation column.

I tried adjusting the width of the page from 760 to 1024 in the css “body”, but it pushed my navigation buttons outside of the image frame.

I’m a newbie and don’t understand how I can also get the image frame for the navigation buttons (about, contact, etc) to move as well so that the buttons line up.

Can you please help? I checked some of the tutorials but can’t seem to find this.

Thanks for the great work!

thivaJuly 22, 2011 at 13:25Reply

i have store images (five image) in one place and fixed the next btn and previous btn ,, i have clicked the next button .and show the next img .or i have clicked previous btn i want show previous img … using css and js script ….help me

rajeshJuly 28, 2012 at 10:53Reply

Thanks for the great work!

FredDecember 19, 2012 at 04:59Reply

Thanks. Very useful :)

Raaj TrambadiaJanuary 30, 2013 at 20:31Reply

Cheers…cheers…cheers…cheers! Thank you so much!

BobFebruary 11, 2013 at 19:03Reply

Hey Andreas, how do ecommerce websites change their images using img class with hex looking values in the class so that they don’t show the price in text but instead show it as an image? The image is always the same name irrespective of the price but the hex values change! e.g img class=”d73a d7a3 da6″

Menu