HTML和CSS对齐图像和文本

问题描述：

我正在设计一个网站，我希望页脚左下角有两个小图像，然后是@*（推特地址）。在页脚中间我想要地址，在页脚的右侧我想要联系号码。HTML和CSS对齐图像和文本

目前我在页脚的所有上面的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;}' – Morpheus

忘记了！现在编辑:) – user3046451

答

首先编辑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/

答

也许是这样的：

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

答

但从设计角度...用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>

在这一点上，我们可以（也许在Styles.css中）写CSS3代码：

... 
#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)}

好吧，这不是因为它容易似乎，但这种方式c给你非常可视的网站（图形草稿+ HTML骨架+ CSS样式）。

HTML和CSS对齐图像和文本

相关推荐