Fontawasome Vertical Icon Align

Why vertical-align: middle; does not align icons to middle of a header?

Solution 1:

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" />
<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>

Solution 2:

.custom {
    color: white;
    vertical-align: middle;
    **line-height: 40px;**
}

Solution 3:

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>

Solution 4:

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);
}