如何在图像的水平ul列表中垂直对齐项目? [英] How to vertically align items in horizontally ul list with images?
本文介绍了如何在图像的水平ul列表中垂直对齐项目?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下html代码:
I have the following html code:
<div id="footer">
<ul id="yw1">
<li><a href="/index.php/site/login">About</a></li>
<li><a href="/index.php/site/login">FAQ</a></li>
<li><a href="http://twitter.com"><img src="/images/twitter_icon.png" /></a></li>
<li><a href="http://twitter.com"><img src="/images/facebook_icon.png" /></a></li>
</ul>
</div>
以及以下CSS样式:
#footer {
margin-top: 25px;
background: #000000 url(images/background.png) repeat;
padding: 25px;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, .2);
}
#footer ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#footer li {
padding-left: 20px;
display: inline;
list-style-type: none;
}
#footer a {
color:white;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
font-size: 14px;
font-weight: 300;
}
现在的结果是:
但是我需要对齐图像和文本链接按垂直排列。我该怎么办?
But I need to align images and text links by vertically. How can I do it?
推荐答案
由于 img
标签是内联的默认情况下,它垂直于基线对齐,因此您需要对 img
标签使用 vertical-align:middle;
As img
tag is inline by default, it vertically aligns to the baseline and hence you need to use vertical-align: middle;
for your img
tag
CSS
#footer img {
vertical-align: middle;
}
这篇关于如何在图像的水平ul列表中垂直对齐项目?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文