Horizo​​ntaly align LI

Question

我在我的页面上有5个li。

其中一个主题（第三个）高于另一个。我希望他们horinzontaly对齐这个bigest李的中心。然而，它在它的顶部。 我试过使用“垂直对齐：中间”，但它不起作用。

这里是我的实际代码：

<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> 

的CSS：

#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; 
} 

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; 
 
}

<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>

，如果我得到你的问题是正确的，那么这就是你需要做什么。我刚刚做了必要的更改，其余代码都是你的。