垂直对齐在内联块中不起作用

Question

我想把文字垂直地放在中间。

但是，这不管用。

当我将文本放置在内联块中时，我应该能够垂直地将文本居中，对吗？

为什么这个代码不工作，我如何使它工作！？

请帮帮我!

(预先谢谢:)

<ul class="socialBlock">
            <li class="socialBlock__item">tw</li>
            <li class="socialBlock__item">fb</li>
            <li class="socialBlock__item">g+</li>

</ul>

CSS

.socialBlock {
padding:10px;
background: yellow;
list-style: none;
}

.socialBlock__item {
margin:0;
padding:0;
display: inline-block;
background: green;
height:44px;
vertical-align: middle;
}

Codeopen

http://codepen.io/anon/pen/DihFw

Answer 1

垂直对齐内联元素的诀窍是有一个更大的内联元素来对齐它们。我发现更容易的是使用显示表和显示表格单元格(通常表单元格就足够了，但是您可能需要在父元素上使用显示表，具体取决于您想要实现的目标：

.socialBlock_item {
    margin: 0;
    padding: 0;
    display: table-cell;
    background: green;
    height: 44px;
    vertical-align: middle /* you still want to use this as well */
}