將div中所有元素的中間垂直對齊

Question

我正在編碼網頁的標題。 但是我發現div中的元素（有時是圖像，有時是文本字段）沒有垂直對齊。 我嘗試使用vertical-align：middle和line-height，但是做不到。

http://jsfiddle.net/v68jpypz/1/

#free-wifi {
    line-height: 28px;
    display: inline-block;
    margin-right: 50px;
    vertical-align: middle;
}

Answer 1

vertical-align: middle僅在將元素標記為table-cell時才起作用，因此請執行以下操作：

#free-wifi {
    display: table-cell;
    margin-right: 50px;
    vertical-align: middle;
}

看到它在這里工作： http : //jsfiddle.net/xv6mthv5/1/

Answer 2

http://jsfiddle.net/v68jpypz/7/

.right {
    float: right;
    display:table;
}

#social-network {
    line-height: 1.5em;
    display: table-cell;
    vertical-align:middle;
}

您可以對左div執行相同的操作。