Question

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

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

 div class="footer">
        &copy; 2014 NPN360 &#149; All rights reserved &#149; 1400 South Wolf Road, Suite #102 &#149; Wheeling, IL 60090 &#149; 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 -->

Answer 1

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

.footer {
    text-align: center;
}

要确定图像的高度，请从：

开始

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

Answer 2

评论后更新

<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 -->

Answer 3

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

<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 -->

尝试在一行上对齐文本

3 个答案: