Twitter Bootstrap Question posted in

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

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 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" href="#">Item 1
        <span class="todas-as-categorias-span">Categorias</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item 4</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Item 5</a>
      </li>
    </ul>
   </nav>
Tags:

2

Answers


  1. 0

    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%;
}
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search