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.
This week’s blog post is very simple by comparison, but will hopefully be a nice little tip for those of you who don’t already use this one.
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 as I will no proceed to demonstrate.
Horizontally Aligning Text using CSS
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.
{ text-align:center; }
Vertically Align Text using CSS
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.
I’ve seen people try to achieve this effect by setting padding of equal proportion, but aside from playing up when it comes to cross browser compatibility, there’s quite simply, an easier way.
{ line-height:30px; }
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.
Simples.
