html - 如何设置div中元素的中间垂直对齐？

Question

我正在尝试在 html+css 中创建水平菜单，但我对菜单元素的垂直对齐有疑问。你知道如何让我的链接垂直居中吗？ 这是代码: HTML:

<div id="navigation">

    <div class="nav"><a href="#">Link<br>1</a></div>
    <div class="nav"><a href="#">Link2</a></div>
    <div class="nav"><a href="#">Link3</a></div>
    <div class="nav"><a href="#">Link4</a></div>

</div>

CSS:

#navigation
{
    float: left;
    width: 100%;
    background: #cccccc;
    text-align:center;
    box-shadow: 0 3px 2px #555555;
    height:100px;
    vertical-align:middle;
    padding:0
}

.nav
{

    display:inline-block;
    width: 120px;
    height:100%;
    padding:0;
    text-align:center;
    font-size:20px;
    vertical-align:middle;
    margin:0;

}

.nav a
{
    color:#333333;
    text-decoration: none;
    display:inline-block;
}

看起来像这样:1

Answer 1

将 line-height 添加到 .nav 并去掉 vertical-align。

Like so

.nav
{

    display:inline-block;
    width: 120px;
    line-height: 100px;
    height:100%;
    padding:0;
    text-align:center;
    font-size:20px;
    vertical-align:middle;
    margin:0;

}