by Ashley Stevens

Created on: February 23, 2007   Last Updated: February 12, 2012

CSS (cascading style sheet) is a great technology for use with web design. It is fast loading and supports a vast range of web browsers, looking good on them all at any resolutions (well, unless you're speaking mobile phone or PDA sized where problems can occur) if you program it properly. Face it; tables were never made for design, they are great for tabular content and occasional layout sculpture, but shouldn't generally be used for design.

A major issue facing designers looking to make that leap of faith to CSS based design is its lack of support for element alignment (left, centre and right). If you are using percentages for your dimensions then it is easy to centre objects, the width of the screen is 100%; therefore you must space your element half of the difference between its width and 100% from the left.

But every person who knows anything about graphics knows that they cannot be sized in percent! Nope, when you're working with images then your only choice is good old pixel's

So let's use an example; I have an image with the dimensions 250px*100px (px is shorthand for pixels, and used in CSS). I want to centre my image so firstly I insert it into my webpage using the following code:

You may have noticed, though, that I have added a property to the image you may not expect; "class="piccy"". This gives the image the properties we are about to define into our CSS code

We are using a class because it is not correct to give an image an ID, but the same method can be applied to ID's too.
Without further ado

.piccy {
position: absolute;
width: 250px;
height: 100px;
left: 50%;
margin-left: -125px;
}

It looks a little complex just to centre an image at first, but once you discover the way each part works you realise just how simple it is (well, to remember and implement anyway!). Firstly we position the image as absolute so that it goes precisely where we tell it to go, and then we define the dimensions of it.

Now for the clever part, we align it 50% from the left and then give it a left margin of minus half the width of the image. This works because with left 50%, the left hand side of the image is positioned exactly 50% away from the left. We then move it left of this position by half of the images width. The result is an image exactly centred.

Think it over, it's hard to grasp at first but is pretty logical once you understand.

As a note, this can also be modified to align vertically centre. Just change the left value to top' and the margin left to margin-top'.

Learn more about this author, Ashley Stevens.
Click here to send this author comments or questions.