HTML和CSS对齐图像和文本

Question

我正在设计一个网站，我希望页脚的左下角有两个小图像，后跟@ * （Twitter地址）。 在页脚中间，我需要地址，在页脚右边，我需要联系电话。

目前，我在页脚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

也许是这样的：

.footer    {
   text-align:centre;
   background-color:#C8C8C8;
   color:#000000;
       padding-bottom:1em;
   }
.footer li{
float: left;
width: 25%;
}

Answer 2

首先将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/

Answer 3

从设计师的角度来看...使用Photoshop，Illustrator，Freehand或类似工具，您可以设计漂亮的页脚，或者最好先设计整个页面的漂亮草稿，这正是您想要看到的。 然后，从这样的标记框架编写部分开始（html5）：

<div id="wrapperdiv">

<header>
<nav>
<ul>
<li><a href='#'>home</li>
<li>...
<li><a href='#'>contact</li>
</ul>
</nav>
</header>
<section><blockquote>...</blockquote>...</section>
...
<footer>
<img src='.../footerLogo_left.png' id='footerLogo_left'>
<img src='.../footerMiddle_text.png' id='footerMiddle_text'>
<img src='.../footerLogo_right.png' id='footerLogo_right'>
</footer>
</div>

此时，我们可以编写CSS3代码（也许在styles.css中）：

...
#wrapperdiv {background...}
header {width...}
nav li a{...}
...
footer{
width:...;
height:...;
margin:...;
}

下一步是从草稿中剪切图像，例如footer_bg.png，footerLogo_left.png，footerLogo_right.png，footerMiddle_text.png ...，并将其链接到标记：

footer{
background:url(.../footer_bg.png) repeat_x;   
width:...;
height:...;
margin:...;
}

#footerLogo_left {
float:left;
margin:...}

#footerMiddle_text {
float:left;
margin: (the same than left)}

#footerLogo_right {
float:right;
margin: (the same than left)}

好的，这看起来并不容易，但是这种方式可以为您提供非常直观的网站（图形草稿+ html框架+ css样式）。