[英]vertically align span with text in li
I have the following: 我有以下内容:
<div class="footer-content">
<ul class="footer-category-list social-icons">
<li>
<a href="https://www.facebook.com/site" target="_blank" title="facebook"><span class="icon-facebook-sign social-icon-big"></span>
Facebook
</a>
</li>
<li>
<a href="https://twitter.com/site" class="icon" target="_blank" title="twitter"><span class="icon-twitter-sign social-icon-big"></span>
Twitter
</a>
</li>
</ul>
</div>
there's a bunch of CSS in the page, this is the most relevant I've been working on: 页面中有一堆CSS,这是我一直在努力的最相关的:
.social-icon-big {
font-size: 300%;
}
ul.social-icons li{
line-height: 0;
vertical-align: middle;
}
li div.social {
display:table-cell;
vertical-align: middle;
height: 25px;
}
in my twitter-bootstrap website, it's currently rendered as in the image: 在我的twitter-bootstrap网站上,它当前呈现为图像:
I would like the thing to have a better vertical alignment. 我想要有一个更好的垂直对齐的东西。
In particular I would like to try with the >
symbol icon and text to have the same base line, that is the three items have the bottom aligned. 特别是我想尝试使用
>
符号图标和文本来获得相同的基线,即三个项目的底部对齐。
Or I would like to try with the three of them have the centers aligned on the same line. 或者我想尝试其中三个让中心在同一条线上对齐。
I'm not sure how to obtain either of the two. 我不知道如何获得这两者中的任何一个。
Here's a JSFiddle for the thing: 这是一个JSFiddle:
For this specific issue, you need to make sure that your icon span is vertically aligned as well 对于此特定问题,您需要确保图标范围也垂直对齐
CSS CSS
.icons-list>ul {
list-style: none;
}
span[class*=social-icon] {
display: inline-block;
vertical-align: middle;
}
.social-icon-big {
font-size: 300%;
}
ul.social-icons li{
line-height: 0;
vertical-align: middle;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.