Aligning text with CSS

Guest · 1 Aligning text with CSS Mon Dec 13, 2010 9:02 pm

Guest

Aligning text with CSS
Aligning text horizontal and vertical

Some times in website design, some of the most basic requirements can leave us pondering for a moment, so little snippets of wisdom here and there are what help us strive toward the better technique in the long run.

When it comes to aligning text we should without doubt be looking to do this using CSS, ensuring that we avoid using any inline styles. This can be used to align text both horizontally and vertically.

Horizontal align

In order to centre the text in a particular div horizontally, we can use the following CSS on either text tag it’s self or the containing parent div. Both will give us the simple and desired effect of horizontal alignment.

Code:: { text-align:center; }

Vertical Align

Out of the two examples mentioned, it’s this one that often leaves people a little stumped. Back in the days of using tables, this function seemed to be taken for granted with the ‘valign’ selector readily on hand.

This effect by setting padding of equal proportion seems to be effective, but aside from playing up when it comes to cross browser compatibility, there’s quite simply, an easier way.

Code:: { line-height:40px; }

This will set the height of the tag or div to 30 pixels whilst ensuring that your text remains in the centre on all browsers and regardless of text size.

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.