Make <a> tag fill <li> with display: table-cell

I want to make the anchor tag to fill the list element maintaining the text vertical and center aligned, but display: table-cell creates a padding on the top and bottom of the anchor, padding: 0 on the list doesn’t work, display:block and height:100% on the anchor works but the text is pulled to the top.

Here’s the JSFiddle

.header-menu {
  padding: 0;
  background: #fff;
}

.navbar .navbar-nav {
  width: 100%;
  display: table;
}

.navbar .navbar-nav .nav-item {
  display: table-cell;
  height: 70px;
  vertical-align: middle;
  border: 1px solid #000;
}

.navbar .navbar-nav .nav-link {
  padding: 0;
  color: #E90020;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  background: grey;
}

.todas-as-categorias-span {
  display: block;
}
<link target="_blank" rel="nofollow" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar header-menu">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" target="_blank" rel="nofollow" href="#">Item 1
        <span class="todas-as-categorias-span">Categorias</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" target="_blank" rel="nofollow" href="#">Item 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" target="_blank" rel="nofollow" href="#">Item 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" target="_blank" rel="nofollow" href="#">Item 4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" target="_blank" rel="nofollow" href="#">Item 5</a>
      </li>
    </ul>
   </nav>

If you want the gray background to fill the <li> emelents completely, you will have to put height: 100% on your <a> elements; the whiteness you see is not padding, it’s the elements not filling their containers.

Now, as you wrote yourself, this will cause your text to align to the top. But unless you need to support super-old browsers, you can simply use flexbox to do the centering. So all you need is 5 new lines in your CSS:

.navbar .navbar-nav .nav-link {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    /* the rest of your original rules */
    padding: 0;
    color: #E90020;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    background: grey;
}

Updated JSFiddle

The link doesn’t know to expand it’s height to fill the 70px height you’ve added to the LI element.

Try:

.navbar .navbar-nav .nav-link {
    padding: 0;
    color: #E90020;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
  background: grey;
  height: 100%;
}