在中间对齐字体真棒图标

Question

我正在使用真棒字体图标。 我似乎无法以某种方式使它们在中间垂直对齐。

白色部分必须在黑色部分的中间。 我用电笔制作了一支笔。 我尝试过https://codepen.io/kevin-bobsen/pen/qKZKRX ：

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

还是行不通。

Answer 1

好吧，您可以像我在以下代码中所做的那样，将align-items：center与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:30px修改#icons i

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

Answer 3

将line-height添加到您的#icons id中 ：

#icons i {

  line-height: 30px;

}