Html 水平对齐

我的页面上有5里

其中一个主题（第三个）高于另一个主题。我想让它们水平对齐这个最大的LI的中心。然而，它在顶部对齐。 我尝试过使用“垂直对齐：中间”，但它不起作用

这是我的实际代码：

 <link rel="stylesheet" href="style2015.css" />

<div id="menu">
<ul>
  <li><a href="#">Portfolio</a>
  <ul>
      <li><a href="#">Sous-item 1</a></li>
      <li><a href="#">Sous-item 2</a></li>
      <li><a href="#">Sous-item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Projets</a>
  </li>
  <li id="logo"></li>
  <li><a href="#">A propos</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div>

#菜单ul{
保证金：0；
填充：0；
列表样式类型：无；
文本对齐：居中；
宽度：700px；
/*一些固定的宽度，所以菜单不会落在下一行*/
}
#菜单里{
/*浮动：左侧；无法轻松对齐浮动元素*/
保证金：自动；
填充：0；
背景色：黑色；
显示：内联块；
垂直对齐：中间对齐；
}
#菜单李a{
显示：块；
宽度：100px；
颜色：白色；
文字装饰：无；
}
#菜单a：悬停{
颜色：#FFD700；
}
#菜单{
显示：无；
}
#菜单ul li：悬停ul{
显示：块；
}
#菜单li：悬停ul li{
浮动：无；
}
#菜单{
位置：绝对位置；
}
#菜单{
高度：30px；
}
/*标志*/
#标志{
高度：190px；
宽度：266px；
背景色：黑色；
}

你会做小提琴或密码笔吗？在我这边，所有的东西看起来都对齐了。这很好用，谢谢。如何将您的答案设置为好答案？单击我答案左侧的复选标记（勾选标记）。

#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {
 float:left;
 margin:auto;
 padding:0;
 background-color:black;
 display: inline;
 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;
}