将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执行相同的操作。