0

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>

4 Answers 4

2

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>

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

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>
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.