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

我有一个完全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>

---

每个列表（

li

）元素的高度是多少？使用此值放置css值

行高：{value here}

---

此外，将其放在您的img上可能会产生最佳情况。如果你能链接到这个网站，我可能会给你更好的指导。

我所要做的就是在图片的样式中添加这一行

vertical-align:middle;

---

这一点，并使您的图像成为李的背景图像。使用CSS背景选项将其居中。下面是一个链接，我将尝试线条高度。线条高度不起作用，我怀疑这是因为它不是块，一种快速的“黑客”修复方法是将

paddin top:10px

应用到img cssregards，不考虑我为线条高度输入的值：结果是一样的（除了链接有时会变得很高）你把这个放在图片上是什么意思？

vertical-align:middle;