[英]Fontawasome vertical icon align
为什么vertical-align: middle;
不能将图标对齐到标题的中间?
.custom { color: white; vertical-align: middle; } .header { width: 100%; height: 40px; background: rgb(40,40,40); }
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> <div class="header"> <i class="fa fa-facebook custom" aria-hidden="true"></i> <i class="fa fa-twitter custom" aria-hidden="true"></i> <i class="fa fa-instagram custom" aria-hidden="true"></i> <i class="fa fa-google-plus custom" aria-hidden="true"></i> </div>
如今,垂直对齐居中的最佳方法是使用flexbox。 也可以看看:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
.custom { color: white; vertical-align: middle; } .header { display:flex; align-items: center; width: 100%; height: 40px; background: rgb(40,40,40); }
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> <div class="header"> <i class="fa fa-facebook custom" aria-hidden="true"></i> <i class="fa fa-twitter custom" aria-hidden="true"></i> <i class="fa fa-instagram custom" aria-hidden="true"></i> <i class="fa fa-google-plus custom" aria-hidden="true"></i> </div>
.custom {
color: white;
vertical-align: middle;
**line-height: 40px;**
}
给.custom
margin-top=2.5%
或margin=2.5%
.custom
,它将起作用。
另一方面,如果您有类似这样的东西, vertical-align
也将起作用。
<a class="header">
<i class="fa fa-facebook custom" aria-hidden="true"></i>
</a>
它不起作用的原因是因为您提到过将height移除height,并且它将高度对齐到中间,而不是将height用作父类的标题,而将其用作标题。
.custom {
color: white;
vertical-align: middle;
}
.header {
width: 100%;
padding:20px;
background: rgb(40,40,40);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.