html – 如何垂直对齐水平ul列表中的项目与图像?
发布时间:2020-12-14 19:45:38 所属栏目:资源 来源:网络整理
导读:我有以下 HTML代码: div id="footer" ul id="yw1" lia href="/index.php/site/login"About/a/li lia href="/index.php/site/login"FAQ/a/li lia href="http://twitter.com"img src="/images/twitter_icon.png" //a/li lia href="http://twitter.com"img src
我有以下
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,.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; } 现在的结果是: 但我需要垂直对齐图像和文本链接.我该怎么做? 解决方法
因为img标签默认是内联的,所以它垂直对齐基线,因此你需要使用vertical-align:middle;为你的img标签
Demo CSS #footer img { vertical-align: middle; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |