CODEWITHSUNDEEP
htmlcss
A191919
A191919

Reputation: 3442

Fontawasome vertical icon align

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>

Upvotes: 0

Views: 117

Answers (4)

Harshit
Harshit

Reputation: 286

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

Upvotes: 0

mokarakaya
mokarakaya

Reputation: 723

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>

Upvotes: 0

cssyphus
cssyphus

Reputation: 40038

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>

Upvotes: 2

stackunderflow
stackunderflow

Reputation: 422

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

Upvotes: 1

Related Questions