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:
#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:
- Quick Tip 5 – Compact CSS
- Quick Tip 6 – CSS Shorthand
- Quick Tip 7 – CSS !Important
- Quick Tip 9 – CSS min height
- Quick Tip 2 – CSS Text Shadow
Posted By: Martyn
Hi, I'm Martyn, the Lead Designer for Web Design GM and really hope you find my existing and upcoming articles useful. Please leave comments below and I will try to respond to any questions as soon as possible.
