CSS HTML：难以理解如何将这段文本居中

Question

如何在此下拉菜单中垂直居中使用名称“Tony Robbins”？我尝试将vertical-align：middle添加到包含文本的span和包含文本的li＃drop-avatar。有人能让我知道我做错了什么吗？

P.S。还有一种方法可以获得文本对齐：中心也在工作，所以“Tony Robbins”也是水平居中的吗？

http://jsfiddle.net/vJaaR/

Answer 1

添加：

img
{
  vertical-align: middle;
}

由于您的文字与图片内嵌，因此您需要告诉图片如何与文字对齐。

Answer 2

span是一个内联元素，因此它只占用所需的空间量。考虑使用display: block将此跨度作为块元素，它将占用整个宽度。然后，您可以将text-align: center应用于此。

但在这种情况下，您可能需要将图像浮动到左侧。

更新：我将风格添加到小提琴中：

http://jsfiddle.net/Dismissile/vJaaR/1/

这样做你想要的吗？

这些是我添加的样式：

a.small-width > span {
    display: block;
    text-align: center;
}

a.small-width > img {
    float: left;
}

您可能想要创建新类，因为我不知道您使用的是什么小宽度。