выровняйте шрифт в середине

Question

Я использую шрифт потрясающие иконки.Каким-то образом я, кажется, не могу поместить их вертикально выровненными в середине.

Белая часть должна быть в середине черной части.Я сделал ручку, используя codepen.https://codepen.io/kevin-bobsen/pen/qKZKRX Я пытался:

vertical-align:middle;
text-align:center;

все еще не работает.

Answer 1

Что ж, вы можете использовать для вашего решения align-items: center with display: inline-flex, как я это делал в следующем коде.Пожалуйста, посмотрите

#main {
height:400px;
width:600px;
border:1px solid black;
margin:0 auto;
}
#pic{
width:300px;
height:100%;
float:left;
}

#bio{
width:300px;
height:100%;
float:right;
background:grey;
}

#avatar{
  width:100%;
  height:50px;
  margin-left:30px;
  margin-top:50px;
  display:inline-block;
}
#avatar img{
  width:50px;
  height:50px;

  border-radius:360px;
}

#avatar span{
  font-size:18px;
  margin-left:30px;
  position:absolute;
  margin-top:15px;

}

#icons{
  width:90%;
  height:30px;
  display:inline-block;
  margin-left:5%;
  font-size:15px;
  margin-right:5%;
  background:red;
}

#icons i{
background:black;
color:white;
text-align:center;
height:100%;
display: inline-flex;
align-items: center;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div id="main">
<div id="pic">
</div>
<div id="bio">
<div id="avatar">
  <img style="vertical-align:middle"     src="https://placehold.it/60x60">
  <span style="">keVin#1234</span>
</div>
<div id="icons">
<i class="fab fa-accusoft"> </i>
  <i class="fab fa-accusoft"> </i>
  <i class="fab fa-accusoft"> </i>
</div>
</div>
</div>
</div>

Answer 2

Добавьте line-height к вашему # значкам id :

#icons i {

  line-height: 30px;

}

Answer 3

Изменить #icons i, добавив line-height:30px

 #icons i {
        background: black;
        color: white;
        text-align: center;
        height: 100%;
        line-height: 30px;
    }