我有一些似乎与我的文本对齐的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 -->
答案 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"> © 2014 NPN360 • All rights reserved • 1400 South Wolf Road, Suite #102 • Wheeling, IL 60090 • 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"> © 2014 NPN360 • All rights reserved • 1400 South Wolf Road, Suite #102 • Wheeling, IL 60090 • 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 -->