如何在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>