vertical-align不能在内联块中工作

Question

我想垂直居中。

但是，这不起作用。

当我将文本放在内联块中时，我应该可以垂直居中文本，对吗？

为什么这段代码不起作用，我怎样才能使它工作！？

请帮帮我！

提前谢谢你：）

HTML

<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 */
}