[英]Fontawasome vertical icon align
Why vertical-align: middle;
为什么vertical-align: middle;
does not align icons to middle of a header? 不能将图标对齐到标题的中间?
.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>
these days, the best way to align to center vertically is to use flexbox. 如今,垂直对齐居中的最佳方法是使用flexbox。 See also: 也可以看看:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ 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;**
}
Give some margin to .custom
margin-top=2.5%
or margin=2.5%
and it'll work. 给.custom
margin-top=2.5%
或margin=2.5%
.custom
,它将起作用。
On the other hand, vertical-align
would also work if you had something like this; 另一方面,如果您有类似这样的东西, vertical-align
也将起作用。
<a class="header">
<i class="fa fa-facebook custom" aria-hidden="true"></i>
</a>
The reason why its not working is because you have mentioned height remove height and it will be aligned to middle, instead of height use padding for the parent class , for you its header . 它不起作用的原因是因为您提到过将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.