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

我想在无序列表的右侧对齐图像。所以联系信息显示在左侧。如何水平对齐图像和无序列表？

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 protected]</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; 
}

图像更加清晰

enter image description here

来源

2014-01-08 Orahmax

float：right; – ammu

它不起作用。 – Orahmax

使用

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

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

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

来源

2014-01-08 18:00:00 Floremin

图像已经对齐到正确但它打破了李元素的对齐 – Orahmax

更新了小提琴以更好地匹配您的示例图像：http://jsfiddle.net/U7XUh/1/确保您的框架足够宽以便“li”元素不要不换行。将代码粘贴到实际页面中时，可以更好地进行调整。 – Floremin

哦，谢谢！它正在工作。 – Orahmax

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

回答

相关问题