html - 垂直对齐在内联 block 中不起作用

Question

我想使文本垂直居中。

但是，这是行不通的。

当我在行内 block 中放置文本时，我应该能够使文本垂直居中，对吧？

为什么这段代码不起作用，我怎样才能让它起作用!？

请帮帮我!

提前谢谢你:)

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;
}

代码打开

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

Answer 1

垂直对齐内联元素的诀窍是有一个更大的内联元素来对齐它们。我发现使用 display table 和 display table-cell 更容易工作(通常 table-cell 就足够了，但您可能需要根据您要实现的目标在父元素上使用 display table:

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