Another vertical-align question

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 &#038; 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 &#038; Renovations</a></li>

And the CSS I’m using looks like:

.services-nav {
  border-bottom: 1px solid #59c6f4;
  margin-bottom: 25px;
  padding-bottom: 25px;

  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. :smile:

It’s really hard to help with this when you post non-css pre-processed stuff. Could you process that CSS and post your demo in a template like below? Or post your demo on CodePen and post the link here (which will display the pen live).

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

/* place CSS here */


<!-- place HTML here -->


Hm, the pen doesn’t seemed to have worked properly. Anyhow, the problem is here:

.services-nav a {
   float: left; 

You can’t use display: table-cell and float together.

1 Like

That’s it - legend, thanks Ralph.