Html 垂直对齐不'；不能在内联块中工作

我想把文字垂直居中

但是，这不起作用

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

为什么这个代码不起作用，我如何才能使它起作用

请帮帮我

提前感谢：）

HTML

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

</ul>

code打开

---

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

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

---

这并不是那么容易。看看这个。对

使用
行高：44px；
作为
。socialBlock\uu项
就可以了。事实上，
垂直对齐：中间；
影响内联元素本身，而不是它的文本内容。是的，我想我最好使用“display:table”谢谢！但是我仍然不明白为什么我不能把文本放在内嵌块的中间。@ W3Q在这个特殊的情况下你可以使用<代码>行高：44 px；< />代码。但是如果你对这个问题感到好奇，请看一下我的。
.socialBlock_item {
    margin: 0;
    padding: 0;
    display: table-cell;
    background: green;
    height: 44px;
    vertical-align: middle /* you still want to use this as well */
}