Выравнивание вертикального значка Font Awesome

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>

html css

0

A191919 29 Май 2016 в 18:14

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>

2

cssyphus 29 Май 2016 в 15:22

Answer 2

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

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

0

Harshit 29 Май 2016 в 15:41

Answer 3

Дайте маржу .custom margin-top=2.5% или margin=2.5%, и все заработает.

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

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

0

mokarakaya 29 Май 2016 в 15:31

Answer 4

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

1

stackunderflow 29 Май 2016 в 15:19

Выравнивание вертикального значка Font Awesome

4 ответа

Похожие вопросы

Новые вопросы

html