HTML 和 CSS 对齐图像和文本答案

【问题标题】：HTML and CSS Aligning Images and TextHTML 和 CSS 对齐图像和文本
【发布时间】：2013-12-26 18:03:12
【问题描述】：

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

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

【问题讨论】：

请同时发布您的 CSS。
将所有文本包装到span 并添加此css .footer ul li span, .footer ul li img { vertical-align: middle;}
忘记了！现在编辑:)

标签： html css image text alignment

【解决方案1】：

从设计师的角度来看...使用 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 样式）。

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

可能是这样的：

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

【讨论】：