如何将文本垂直中心与一个大字体awesome图标?

假设我有一个bootstrap按钮，带有一个字体很棒的图标和一些文本:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

我如何使文本显示垂直居中? 文本现在与图标的底部边缘对齐:http://jsfiddle.net/V7DLm/1/

当前回答

对我来说，只要让元素显示网格，并对齐内容就可以完美地工作。简单的解决方案。

.yourfontawesome<i>Element{
display: grid;
align-content: center;
}

2021-12-03 08:49:50

其他回答

对于那些使用Bootstrap 4的人来说很简单:

<span class="align-middle"><i class="fas fa-camera"></i></span>

2019-06-27 14:40:37

这对我来说很有效。

i.fa {
  line-height: 100%;
}

2016-11-03 06:44:14

一个flexbox选项-字体awesome 4.7及以下

足总4。x托管URL - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

div { display: inline-flex; /* make element size relative to content */ align-items: center; /* vertical alignment of items */ line-height: 40px; /* vertically size by height, line-height or padding */ padding: 0px 10px; /* horizontal with padding-l/r */ border: 1px solid #ccc; } /* unnecessary styling below, ignore */ body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;} <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div> <i class='fa fa-2x fa-camera'></i> hello world </div>

小提琴

http://jsfiddle.net/Hastig/V7DLm/180/

使用flex和字体很棒

足总5。x托管URL - https://use.fontawesome.com/releases/v5.0.8/js/all.js

div { display: inline-flex; /* make element size relative to content */ align-items: center; /* vertical alignment of items */ padding: 3px 10px; /* horizontal vertical position with padding */ border: 1px solid #ccc; } .svg-inline--fa { /* target all FA icons */ padding-right: 10px; } .icon-camera .svg-inline--fa { /* target specific icon */ font-size: 50px; } /* unnecessary styling below, ignore */ body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;} <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script> <div class="icon-camera"> <i class='fas fa-camera'></i> hello world </div> <div class="icon-clock"> <i class='fas fa-clock'></i> hello world </div>

小提琴

https://jsfiddle.net/3bpjvof2/

2016-08-26 08:10:28

我99%的情况下在文本旁边使用图标，所以我做了全局更改: