我有以下 html 代码:
<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;
}
现在结果是:
但我需要垂直对齐图像和文本链接。我该怎么做?
As img
默认情况下,标签是内联的,它与基线垂直对齐,因此您需要使用vertical-align: middle;
为您img
tag
Demo http://jsfiddle.net/7MtKq/178/
CSS
#footer img {
vertical-align: middle;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)