Quick Tip 10 – CSS Vertical Alignment

One consistent problem I always had when learning web design was to try and vertically align my content, whether it be a navigation or text in a div without excessive padding.

Here are couple of solutions I use on a regular basis that i find to work really well.

Solution 1 – Line Height

For this example I usually use this on navigation’s to help vertically align the text. For example, once styling your navigation you are usually left with the text touching the top of the box so to make it vertically align attach a display block to the anchor li a and give it a set height you can then apply a line height of the same measurement to vertically align it removing any need for padding.
Here is the code:
Quick Tip Gary

#nav ul { height: 41px; width: 400px; }
#nav li a { line-height: 41px; display: block; float: left; }

This isn’t just limited to navigation so give it a try.

Solution 2 – Min Height

Using the table cell property you can apply vertical align so should now work as it takes the min-height property to achieve this, give it a try.


.container { min-height: 500px; display: table-cell; vertical-align: middle; }

Now any text inside should be vertically aligned.

Related posts:

  1. Quick Tip 5 – Compact CSS
  2. Quick Tip 6 – CSS Shorthand
  3. Quick Tip 7 – CSS !Important
  4. Quick Tip 9 – CSS min height
  5. Quick Tip 2 – CSS Text Shadow

Tags: ,

Leave a Reply

Contact Us Today...

For more information regarding any of our services or to arrange a free consultation simply send us a message or call 02920 290 080 for Cardiff and 01179 000 482 for Bristol.

Firefox 4 Beta

Mozilla have released the first beta version of Firefox 4. The latest version of this browser will include better support for many of the new web technologies, a new add on manager, crash protection from third party plugins and accelerated hardware support. One of the most obvious changes is that the tabs have now been moved [...]
» more

Cardiff: 02920 290 080 Bristol: 01179 000 482