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

像这样

.nav
{

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

}

Answer 2

这是一种使文本标签垂直居中的方法，而无需将line-height指定为包含元素的高度。

将display: table-cell应用于链接（ .nav a ），并首先将高度值继承到.nav ，然后继承到.nav a 。 对于表格单元格，vertical-align属性将使文本居中。 这种方法的优点是，如果标签跨越两行，则文本仍将垂直居中。

结果是a具有较大的活动区域，并且行为更像按钮。 一些设计可能是理想的功能。

当然，如果您的标签是单个单词（仅一行文本），那么行高技巧可能是一个不错的选择。

 #navigation { float: left; width: 100%; background: #cccccc; text-align: center; box-shadow: 0 3px 2px #555555; height: 100px; padding: 0 } .nav { display: inline-block; width: 120px; height: inherit; padding: 0; text-align: center; font-size: 20px; margin: 0; border: 1px dashed blue; } .nav a { color: #333333; text-decoration: none; display: table-cell; vertical-align: middle; border: 1px dotted blue; height: inherit; width: inherit; } 

 <div id="navigation"> <div class="nav"><a href="#">Link1<br>sub-text</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>