如何水平对齐图像和无序列表？

Question

我正在尝试在无序列表的右侧对齐图像。因此，联系信息显示在左侧。

HTML

<div id="contact">
            <h1>Contact Us</h1>
            <ul>
                <li>
                    <div class="icon"><img src="images/map.png" alt=""></div>
                    <div class="info"><b>Address</b></div>
                    <div class="sub-info">72 John Doe area</div>
                </li>
                <li>
                    <div class="icon"><img src="images/email.png" alt=""></div>
                    <div class="info"><b>Email</b></div>
                    <div class="sub-info">email@domain.com</div>
                </li>
                <li>
                    <div class="icon"><img src="images/phone.png" alt=""></div>
                    <div class="info"><b>Phone</b></div>
                    <div class="sub-info">732-757-2923</div>
                </li>
            </ul>
            <img src="images/location.png" alt="">
</div><!-- contact -->

下面是我使用表格对齐列表元素的代码，如上面HTML代码中所示。

CSS

#contact{
    background-color: #f2f2f2;
    margin: 0 auto;
    padding: 5% 5% 5% 12.5%;
}
#contact ul{
    width: 50%;
    margin: 0;
    margin-top: 60px;
}
#contact li{
    display: table;
    margin-bottom: 50px;
}
.icon, .info, .sub-info{
    display: table-cell;
}
.info, .sub-info{
    vertical-align: middle;
}
.icon, .info{
    width: 80px;
}

图片更清晰

Answer 1

使用

display: inline-block; vertical-align: top;

在<ul>和<img>元素上。小提琴：http://jsfiddle.net/U7XUh/1/

您需要针对特定​​的图片/图标尺寸稍微调整一下，但您明白了。