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>

我当前的代码Here

的小提琴

Answer 1

实际上有多种方法可以实现垂直对齐。但是，由于在这种情况下列表项被display编辑为inline，您可以通过向vertical-align添加middle <ul>的全高内联元素来实现#menu_bar ul:after { content: ""; display: inline-block; vertical-align: middle; height: 100%; } {1}}如下：

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

此方法描述为here和here。这是一个在线示例：

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

{{1}}

如何将ul元素垂直居中对齐？

1 个答案: