如何水平對齊圖像和無序列表？

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 --> 

下面是其中i使用的表對準爲列表中的元素如在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/

您需要針對您的特定圖像/圖標尺寸稍微調整一下，但您明白了。