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