Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Text Alignment with CSS

left | right | center | justify

I used the text-align property with a paragraph element to center the values above.

If you use the text-align property with a value of right with a paragraph tag, all the text within that paragraph would line up evenly on the right side and have a ragged left side.

Here’s how that would be coded:

A value of left aligns text to the left, which is the default. A value of center would obviously align text to the center. The text-align value will also align images and other content to the set value unless they overridden by other code, although that's not the preferred way to center images. I'll show you that at the end since it's really a different tutorial.

The value of justify will cause text to align evenly on the right and left side with no ragged edges. This is accomplished by the browser adjusting the space in between the words.

For justified text there needs to be at least three lines of text. That’s because the last line of any paragraph is ragged, otherwise a paragraph that ends in one or two words would look weird with the letters spaced so far apart.

This is what a paragraph of justified text looks like. I limited the paragraph to 300 pixels wide so I could demonstrate justified text in fewer words. Do you like it?

Although I like the look of justified text from an aesthetic standpoint, one needs to take care in using it. Using it in narrow containers like I show here can result in an excess of empty space between words, as you can see the above example at some screen sizes. It's often best to avoid it unless you have a a specific need for it.

How to Center an Image

...then you just have to add the "center" class to your image to center it:

You can also set both margins to auto but I prefer to control the top and bottom margins. Use either one of these rules to set both margins to auto:

And now, your reward for reading this far...