正确垂直居中的链接和图像

Question

我有一个完整的CSS下拉菜单。我遇到的问题是链接中的图像和文本没有垂直对齐我想要的方式。

我不希望文本的底部和图像的底部对齐。我希望他们的中心排队，更像是这样：

以下是我创建菜单的方法：

<li><a class="head" href="#">Link 1 &nbsp;&nbsp; &blacktriangledown; </a>
<ul>
<li><a class="sub" href="#">Monkey 1 <img src="<?php echo $image; ?>"></a></li>
<li><a class="sub" href="#">Monkey 2 <img src="<?php echo $image; ?>"></a></li>
<li><a class="sub" href="#">Monkey 3 <img src="<?php echo $image; ?>"></a></li>
<li><a class="sub" href="#">Monkey 4 <img src="<?php echo $image; ?>"></a></li>
<li><a class="sub" href="#">Monkey 5 <img src="<?php echo $image; ?>"></a></li>
</ul>
</li>

以下是我试图解决问题的方法，但失败了：

ul li{
    float: left;
    width: 120px;
    text-align: center;
    vertical-align: middle;
}

Answer 1

每个列表（li）元素的高度是多少？使用此值放置css值

line-height: {value here}

同样将这个放在你的img上可能会导致最好的情况。如果您可以链接到该网站，我可能会给您更好的指示。

Answer 2

我所要做的就是将这一行添加到图像的样式

vertical-align:middle;