尝试在一行上对齐文本

时间:2014-09-11 19:51:11

标签: html html5

我有一些似乎与我的文本对齐的HTML,但它使用了facebook和twitter图标不是行文本的高度。不确定我做错了什么。

该网站为NPN360,我正在处理的代码位于页面底部。

 div class="footer">
        © 2014 NPN360 • All rights reserved • 1400 South Wolf Road, Suite #102 • Wheeling, IL 60090 • 847-215-7300 
        <a href="http://www.facebook.com/pages/Northern-Printing-Network/179242349742" target="_blank"><img src="/images/facebook_16.png" /></a> 
        <a href="http://www.linkedin.com/company/130676?trk=tyah" target="_blank"><img src="/images/linkedin_16.png" /></a> 
<span style="float:right;"><td><font size="1"><a href="http://restaurantinc.com/privacypolicy" target="_blank"> Privacy Policy</a>.</span>
</p>
    </div> <!-- footer -->

3 个答案:

答案 0 :(得分:0)

除了许多HTML错误之外,修复对齐的最简单方法是将浮点放在页脚元素上并改为使用text-align:

.footer {
    text-align: center;
}

要确定图像的高度,请从:

开始
.footer img {
    vertical-align: middle; // try also baseline, text-bottom, etc...
}

答案 1 :(得分:0)

评论后更新

<div class="footer">
<style>
.footer img {
padding-left: 5px;
vertical-align: sub;
}
label#lbl { vertical-align: 5px; }
</style>
<label id="lbl"> &copy; 2014 NPN360 &#149; All rights reserved &#149; 1400 South Wolf Road, Suite #102 &#149; Wheeling, IL 60090 &#149; 847-215-7300 </label>
        <a href="http://www.facebook.com/pages/Northern-Printing-Network/179242349742" 

target="_blank"><img src="/images/facebook_16.png" /></a> 
            <a href="http://www.linkedin.com/company/130676?trk=tyah" target="_blank"><img src="/images/linkedin_16.png" /></a> 
<span style="float:right;"><font size="1"><a href="http://restaurantinc.com/privacypolicy" target="_blank"> Privacy Policy</a>.</span>
    </p>
  </div> <!-- footer -->

答案 2 :(得分:0)

嗯..不确定我是否正确这样做。

<div class="footer">
<style>
.footer img {
padding-left: 5px;
vertical-align: sub;
}
label#lbl { vertical-align: 5px; }
</style>
<label id="lbl">        &copy; 2014 NPN360 &#149; All rights reserved &#149; 1400 South Wolf Road, Suite #102 &#149; Wheeling, IL 60090 &#149; 847-215-7300 </label>
        <a href="http://www.facebook.com/pages/Northern-Printing-Network/179242349742" target="_blank"><img src="/images/facebook_16.png" /></a> 
        <a href="http://www.linkedin.com/company/130676?trk=tyah" target="_blank"><img src="/images/linkedin_16.png" /></a> 
<label id="lbl"><span style="float:right;"><font size="1"><a href="http://restaurantinc.com/privacypolicy" target="_blank"> Privacy Policy</a>.</span></label>
</p>
    </div> <!-- footer -->