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

【问题标题】：How can I align li elements in ul vertically centered?如何在 ul 垂直居中对齐 li 元素？
【发布时间】：2015-03-30 03:26:58
【问题描述】：

我有一个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>

以及我当前的代码Here的小提琴

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

实际上有多种方法可以实现垂直对齐。但是，由于在这种情况下，列表项被 display 编辑为 inline，您可以通过将具有 vertical-align 或 middle 的全高内联元素添加到 <ul>，如下所示：

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

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

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>

【讨论】：