如何解决div +链接中垂直居中的Font Awesome图标居中+可疑区域
我的目标是在div栏中将可点击(链接)Font Awesome图标垂直居中。它不起作用。而是将图标粘贴到div的底部。
这是我尝试过的:
#bar {
background-color: red;
}
#bar>a {
font-size: 100px;
color: white;
background-color: green;
display: inline-block;
}
#bar>a>svg {
background-color: blue;
vertical-align: middle;
}
<script src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<div id="bar">
<a href="https://www.google.com">
<i class="fab fa-instagram"></i>
</a>
</div>
此外,链接如何仅是符号的确切区域?
解决方法
问题出在line-height
上-因为您使图标的字体大小太大,它也增加了行高(并且行高通常大于字体字母,以允许用于行间距)。
您可以通过减小行高以使其匹配(或小于)图标的高度来进行修复,例如:
#bar > a {
font-size: 100px;
line-height:75px;
/* rest of CSS */
}
工作段:
#bar {
background-color: red;
}
#bar > a {
font-size: 100px;
color: white;
background-color: green;
display: inline-block;
line-height:75px;
}
#bar > a > svg {
background-color: blue;
vertical-align: middle;
}
<script src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<div id="bar">
<a href="https://www.google.com">
<i class="fab fa-instagram"></i>
</a>
</div>
,
从vertical-align:middle
中删除#bar > a > svg
,您也可以进行。此外,在加载前按 ctrl + F5 清除缓存。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。