垂直对齐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执行相同操作。