Horizontally align LI

Question

I\'ve got 5 li on my page.

One of theme (the third) is higher than the other. I would like them to horizontally align to the center of this biggest LI. However, it\'s a

Answer 1

#menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
  width: 700px;
  /* some fixed width so, menu doesn't fall on next line*/
}
#menu li {
  /*  float: left; you can't align a floated element easily */
  margin: auto;
  padding: 0;
  background-color: black;
  display: inline-block;
  vertical-align: middle;
}
#menu li a {
  display: block;
  width: 100px;
  color: white;
  text-decoration: none;
}
#menu li a:hover {
  color: #FFD700;
}
#menu ul li ul {
  display: none;
}
#menu ul li:hover ul {
  display: block;
}
#menu li:hover ul li {
  float: none;
}
#menu li ul {
  position: absolute;
}
#menu {
  height: 30px;
}
/* Logo */

#logo {
  height: 190px;
  width: 266px;
  background-color: black;
}

  

    
Portfolio
      

        
Sous-item 1
        
        
Sous-item 2
        
        
Sous-item 3
        
      
    
    
Projets
    
    

    
A propos
    
    
Contact
    
  

If i got your question correct, then this is what you need to do. I have just made the required changes, rest of code is all yours.