如何在ul中垂直对齐li元素？

Question

我有一个ul ，它的元素以菜单格式水平放置。 我想使li在ul占据的空间中垂直对齐，但是我正在努力使其正常工作。

有谁知道我要去哪里错了？

的CSS

a { 
    color:#d82727; 
    text-decoration:none; 
    font-weight:normal; 
}
a:link { 
    color:#d82727; 
}
a:visited { 
    color:#d82727; 
}
a:focus { 
    color:#d82727; 
}
a:hover { 
    color:#d82727; 
    font-weight:bold; 
}


#menu_bar {
    background-color:#ffffff;
    height:40px;
    border-bottom:2px #eeeeee solid;
    padding-left:20%;
    padding-right:20%;
}
#menu_bar ul {
    padding:0;
    margin:0;
    height:100%;
}
#menu_bar ul li {
    display: inline;
    height:100%;
    vertical-align: middle;
    padding-left:5px;
    padding-right:5px;
}
#menu_bar ul li a:hover {
    color:#d82727;
    font-weight:bold;
}


.active { 
    color:#d82727; 
    border-bottom:2px #d82727 solid; 
}

的HTML

<div id="menu_bar">
    <ul>
        <li><a href="#/foo" class="active">Foo</a></li>
        <li><a href="#/bar">Bar</a></li>
    </ul>
</div>

而我当前的代码的小提琴这里

Answer 1

实际上，有多种方法可以实现垂直对齐。 但是，由于在这种情况下列表项以内inline display ，因此可以通过向<ul> middle vertical-align的全高内联元素，如下所示：

#menu_bar ul:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

此方法在此处和此处进行描述。 这是一个在线示例：

 a { color:#d82727; text-decoration:none; font-weight:normal; } a:link { color:#d82727; } a:visited { color:#d82727; } a:focus { color:#d82727; } a:hover { color:#d82727; font-weight:bold; } #menu_bar { background-color:#ffffff; height:40px; border-bottom:2px #eeeeee solid; padding-left:20%; padding-right:20%; } #menu_bar ul { padding:0; margin:0; height:100%; } #menu_bar ul:after { content: ""; display: inline-block; vertical-align: middle; height: 100%; } #menu_bar ul li { display: inline; height:100%; vertical-align: middle; padding-left:5px; padding-right:5px; } #menu_bar ul li a:hover { color:#d82727; font-weight:bold; } .active { color:#d82727; border-bottom:2px #d82727 solid; } 

 <div id="menu_bar"> <ul> <li><a href="#/foo" class="active">Foo</a></li> <li><a href="#/bar">Bar</a></li> </ul> </div>