html - 正确垂直居中链接和图像

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 上放置它。如果您可以链接到该网站，我可能会为您提供更好的说明。