topic title

This refers to how text, or other objects such as images, are positioned on the page, relative to the margins at left and right. Note, however, that it can also refer to the positioning within columns, table cells, or other layout techniques, if used to divide up the page (as on this site).

The default for just about everything is to left-align the page contents - in other words, the margin at the left-hand side is straight, but not at the right-hand side. Other options are to, obviously, reverse this: align to the right, but not the left - and finally to centre-align.

This text is right-aligned.

This text is centre-aligned. Note that whenever you render the word center in HTML you have to type it like that - with the American spelling.

Note that in printed material it is often considered tidiest of all to align the text to both margins, this being known as "fully-justified" text. Although this is technically possible on a web page, it doesn't really work very well and can actually make a page look quite ugly. Best to forget about it.

The reason I've given this subject a separate page is that there are several ways of producing text alignment. The most common is the ALIGN attribute, which can take the values left, right or center. This attribute appears all over the place: in tables, <P> tags, images, and several other places. It's fairly self-explanatory - the trouble is, it doesn't always work, particularly not in images.

Because of that fragility it's worth knowing about a couple of other methods. The best is to use text-align: center; (or right) in the style sheet definition for a particular tag. You might also try the <CENTER> tag. This is not officially part of the HTML specification, but all major browsers recognise it, and it's so useful it might as well be included on this site even though I've tried to avoid "unofficial" tags. Use it like any other tag: enclose all the text, images, tables and so on that you want to centre within it, and remember to close it when you're done.

A just about identical effect can be produced by the tag, <DIV ALIGN=center>. The advantages of this method over the <CENTER> tag may not seem very obvious at this stage if you want to centre-align - but one clear bonus is that you can, of course, change the value of the attribute to <DIV ALIGN=right>.

Back to the top

Back to the menu for lesson 2