Fontawasome vertical icon align

Question

Почему vertical-align: middle; не выравнивает значки до середины заголовка?

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

Answer 1

в эти дни, лучший способ, чтобы выровнять по центру по вертикали заключается в использовании Flexbox. Смотрите также:

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>

Answer 2

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

Answer 3

Дайте некоторый запас для .custommargin-top=2.5% или margin=2.5%, и он будет работать.

С другой стороны, vertical-align также работал бы, если бы у вас было что-то подобное;

<a class="header"> 
    <i class="fa fa-facebook custom" aria-hidden="true"></i> 
</a> 

Answer 4

Причина, почему ее не работает, потому что вы упомянули высоту высоту удалить, и он будет выровнен по центру, вместо использования высоты прокладки для родительского класса, для вас его заголовок.

.custom { 
    color: white; 
    vertical-align: middle; 
} 
.header { 
    width: 100%; 
    padding:20px; 
    background: rgb(40,40,40); 
}