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

Question

与标题一样，我不想创建一个可点击列表，其中每个元素左侧包含一个图像，右侧包含两行文本。

现在我已经设法使用以下代码实现元素：

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>

CSS：

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

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

我现在的结果是：

但是，我的红色图像不是垂直居中而且最差：图像和第二个标签下方的区域，因此第一个标签上方的区域（我标记了第二个元素上带绿色的区域）不可点击。我在这里做错了什么，你能帮帮我吗？

提前致谢！

Answer 1

这是解决方案 - http://jsfiddle.net/SaRnR/

Answer 2

不确定没有测试，但这应该适合你。

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

.verticalListItem a {
    overflow: auto;
}

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

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