HTML 和 CSS 对齐图像和文本

Question

我正在设计一个网站，我希望页脚在左下角有两个小图像，后跟@*(推特地址)。在页脚中间我想要地址，在页脚右侧我想要联系电话。

目前，我在页脚 div 中拥有以上所有内容，但它们并未全部对齐。图片相距很远，文字放错地方了。文本位于图像下方和右侧。但是我希望所有内容都水平对齐。

我在 Macromedia Dreamweaver 上使用 HTML 和 CSS。

当前代码为:

<div class="footer content">
    <ul>
        <li> <img src="Images/facebook.png" />  <img src="Images/twitter.png" />  </li>
        <li>@TWITTERADRESS</li>
        <li>POSTAL ADDRESS </li>        
        <li>TEL NUMBER</li>
    </ul>
</div> <!--end of footer--> 

CSS

.footer    {
       text-align:centre;
       background-color:#C8C8C8;
       color:#000000;
           padding-bottom:1em;
       }

Answer 1

首先将 CSS 编辑为

.footer ul li {
   display: inline; // in a straight line
}

将 HTML 部分编辑为:

<div class="footer">
  <ul>
    <li class="image"><img src="Images/facebook.png" />
    <img src="Images/twitter.png" /></li>
    <li class="twitter">@TWITTERADRESS</li>
    <li class="address">POSTAL ADDRESS </li>        
    <li class="number">TEL NUMBER</li>
  </ul>
</div>

现在将 CSS 部分编辑为:

.image {
   float: left; // float to the left
}

.number {
   float: right; // float to the right
}

在这里试试:http://jsfiddle.net/afzaal_ahmad_zeeshan/6zYeA/