I know there are plenty of well known techniques out there to vertical-align an element. I’ve used the table-cell + vertical-align technique before with success. However, I’ve just done it again on a site I’m working on and it just won’t play nicely. Can anyone spot what’s the problem?
The HTML is what WordPress spits out when you use their menu system, e.g.
<nav class="services-nav">
<ul id="menu-services-nav" class="menu">
<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#">Decks & Pergolas</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="#">Extentions & Renovations</a></li>
</ul>
</nav>
And the CSS I’m using looks like:
.services-nav {
border-bottom: 1px solid #59c6f4;
margin-bottom: 25px;
padding-bottom: 25px;
ul,
li {
list-style: none;
margin: 0; padding: 0;
}
ul {
width: auto;
}
li {
display: table;
float: left;
}
a {
border-radius: 10px;
color: white;
display: table-cell;
float: left;
font: bold 1.4em "Nexa";
height: 45px;
margin: 0 8px 10px 0;
padding: 0 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 185px;
vertical-align: middle;
&:hover {
@include gradient-light-blue;
}
@include gradient-dark-blue;
}
}
No luck though, the text is sitting flush at the top. Any suggestions would be greatly appreciated.