Align Menu Items Vertically

Asked

Viewed 680 times

1

I’m trying to create a horizontal menu but I’m having difficulties in vertical alignment.

Some menu items have line break and others do not.

I tried to create a CSS to configure the elements div, ul and li so that they are aligned in the center vertically, but the items that do not have line breaking, are aligned in the base of the items that have line breaking.

I made an example at the Fiddle and I’d like your help: Code on the Fiddle

#menu{
  background: #535454;
  width: 100%;
  overflow: hidden;
}

#menu ul{
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
}

#menu ul li{
  display: inline-block;
  max-width: 150px;
  text-align: center;
}

#menu ul li a{
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 10px;
  text-transform: uppercase;
  position: relative;
}

#menu ul li a:hover{
  color: #333333;
  background: #00a4e6;
}  
<div id="menu">
  <ul>
    <li>
      <a href="#">Proteção para Cabeça</a>
    </li>
    <li>
      <a href="#">Luvas</a>
    </li>
    <li>
      <a href="#">Proteção para Torax</a>
    </li>
    <li>
      <a href="#">Botas</a>
    </li>
    <li>
      <a href="#">Proteção para Pernas</a>
    </li>
  </ul>
</div>

Thank you all!

html5 css3

2 answers

2

You can align text vertically by changing the display for table-cell with vertical-align:middle; and for it to work the same needs to be inside a div with display:table;. That’s just one of the ways. 

#menu{
  background: #535454;
  width: 100%;
  overflow: hidden;
}

#menu ul{
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: table;
}

#menu ul li{
  display: table-cell;
  max-width: 150px;
  text-align: center;
  vertical-align:middle;
}

#menu ul li a{
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 10px;
  text-transform: uppercase;
  position: relative;
}

#menu ul li:hover{
  color: #333333;
  background: #00a4e6;
} 
<div id="menu">
  <ul>
    <li>
      <a href="#">Proteção para Cabeça</a>
    </li>
    <li>
      <a href="#">Luvas</a>
    </li>
    <li>
      <a href="#">Proteção para Torax</a>
    </li>
    <li>
      <a href="#">Botas</a>
    </li>
    <li>
      <a href="#">Proteção para Pernas</a>
    </li>
  </ul>
</div>

0


Using vertical-align:

Missed the vertical-align in your code. By default, inline-block is aligned by baseline.

See with vertical-align:middle:

#menu{
  background: #535454;
  width: 100%;
  overflow: hidden;
}

#menu ul{
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
}

#menu ul li{
  display: inline-block;
  vertical-align:middle;
  max-width: 150px;
  text-align: center;
}

#menu ul li a{
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 10px;
  text-transform: uppercase;
  position: relative;
}

#menu ul li a:hover{
  color: #333333;
  background: #00a4e6;
}
<div id="menu">
  <ul>
    <li>
      <a href="#">Proteção para Cabeça</a>
    </li>
    <li>
      <a href="#">Luvas</a>
    </li>
    <li>
      <a href="#">Proteção para Torax</a>
    </li>
    <li>
      <a href="#">Botas</a>
    </li>
    <li>
      <a href="#">Proteção para Pernas</a>
    </li>
  </ul>
</div>

For the record, if I were to go over the top, it would be vertical-align:top. Maybe we should use the <ul> as #menu, to simplify the code.

  • Why the Hover of a row items does not fill the whole space?

  • 1

    @Diegof pq an inline-block is like a normal text character. It is not suitable for this type of menu. I probably wouldn’t even use it ul for a layout of this type, but you know how such "good practices" are :)

  • @Bacco thanks for the tip! Now, how to solve the problem of the Hover of the items of a line, that Diegof mentioned, to occupy the whole space of ul ?

  • @Christianoribeirosoares is like I said, inline-block is not for this kind of thing. Probably the best thing would be to switch to flexbox, or something like that.

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.