Vertical alignment with CSS

I'm starting up a new project, and I've always had an issue getting vertical alignment right in CSS. Is there anything I could do better that what I've currently come up with? Replacing the header and nav with divs, and changing the rgba values to hex values this seems to work all the way back to IE7 which I'm happy with.

CSS

html, * {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}

body {
margin:0;
padding:0;
}

nav {
background-color:rgba(0, 0, 0, 0.1);
}

nav a.tab {
text-align:center;
padding:0 15px;
color:#FFFFFF;
display:inline-table;

vertical-align:middle; text-decoration:none;
}

nav a.tab > span {
display:table-cell;
vertical-align:middle;
}

nav a.tab:hover {
background-color:rgba(0, 0, 0, 0.1);
text-decoration:underline;
}

header {
background-color:#27AE60;
font-size:1.2em;
color:#FFF;
display:table;
width:100%;
}

header, header h1, header nav, header nav a.tab {
height:80px;
vertical-align:middle;
}

header nav {
display:inline-block;
}

header h1 {
margin:0 20px;
display:inline;
text-shadow:2px 2px 2px #333333;
}


HTML


Projects


Home


Projects


Contact





jsFiddle

I only have some nitpicks about formatting and readability.
Hopefully somebody else will comment specifically about good approaches for treating vertical alignment.

It would be more readable (and the common convention) to put a space after colons.
So instead of:

background-color:rgba(0, 0, 0, 0.1);
text-decoration:underline;

Write as:

background-color: rgba(0, 0, 0, 0.1);
text-decoration: underline;

And don't put two definitions on the same line like this:

vertical-align:middle;  text-decoration:none;

It's better when code reads from top to bottom,
and your eyes can stay focusing on the left,
rather than dipping deeper into the right part, like this:

vertical-align: middle;
text-decoration: none;

StackExchange Code Review Q#80176, answer score: 3