Another vertical-align question

HTML & CSS
1

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

2

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">
<head>
<meta charset="utf-8">
<style>

/* place CSS here */

</style>
</head>
<body>

<!-- place HTML here -->

</body>
</html>
4

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
5

That’s it - legend, thanks Ralph.