CSS：将图像定位在两行文本的左侧

正如标题所说，我不想创建一个可点击的列表，其中每个元素在左边包含一个图像，在右边包含两行文本

现在，我已经用以下代码实现了这些元素：

HTML:

<div class="verticalListItem">
                <a href="#">
                    <div class="verticalItemImage"><img src="images/vdfLogo.png" width="80" height="80" /></div>

                    <div class="verticalItemText">

                        <p>Pop/Rock</p>
                        <p>0</p>
                    </div>
          </a>
</div>

我现在得到的结果是：

但是，我的红色图像没有垂直居中，这是最糟糕的：图像和第二个标签下方的区域，因此第一个标签上方的区域（我在第二个元素上用绿色标记了这些区域）不可单击。我做错了什么，你能帮帮我吗

---

提前谢谢

没有测试就不确定，但这应该对您有用

.verticalListItem  {
    border: 1px solid #333;
}

.verticalListItem a {
    overflow: auto;
}

.verticalItemImage {
    float: left;
}
.verticalItemImage img {
    display: block;
}

.verticalItemText {
    float: left;
    display: block;
    line-height: 40px;
}

---

这是解决方案-

您好，谢谢您的回答。但是，你的代码把一切都搞糟了，无法解决不可点击的区域：（嗨，谢谢，它解决了不可点击的区域。图像仍然没有居中，但我可以用一点填充：）再次感谢！

.verticalListItem  {
    border: 1px solid #333;
}

.verticalListItem a {
    overflow: auto;
}

.verticalItemImage {
    float: left;
}
.verticalItemImage img {
    display: block;
}

.verticalItemText {
    float: left;
    display: block;
    line-height: 40px;
}