Why 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. See also:
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;**
}
Give some margin to .custom
margin-top=2.5%
or margin=2.5%
and it'll work.
On the other hand, vertical-align
would also work if you had something like this;
<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 .
.custom {
color: white;
vertical-align: middle;
}
.header {
width: 100%;
padding:20px;
background: rgb(40,40,40);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.