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

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>元素。 fiddle :http://jsfiddle.net/U7XUh/1/

您需要针对特定​​的图像/图标尺寸进行一些调整，但您明白了。