Align Menu Items Vertically

Navigation
1

I'm trying to create a horizontal menu but I'm having trouble with vertical alignment.

Some menu items have line breaks and some do not.

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

I did an example on Fiddle and would like your help: Code on 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!

    
asked by anonymous 06.05.2016 / 23:48

2 answers

0

Using vertical-align:

vertical-align was missing from your code. By default, inline-block is aligned with 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>

Just to put it, if it were to line up, it would be vertical-align:top . It might be best to already use <ul> as #menu , to simplify the code.

    
06.05.2016 / 23:52
2

You can align text vertically by changing display to table-cell with vertical-align:middle; and for this to work it must be inside a div with display:table; . This is only one way. 

#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>
    
07.05.2016 / 00:01
How do I create a shortcut to open a site in the browser? How can I put an array in a JavaScript variable and compare it with the value in the text field?