How to center text vertically with a large font-awesome icon? - html

Question

Lets say I have a bootstrap button with a font-awesome icon and some text:
<div>
<i class='icon icon-2x icon-camera'></i>
hello world
</div>
How do I make text appear vertically centered?
Text is aligned with the bottom edge of the icon now: http://jsfiddle.net/V7DLm/1/

Answer 1

I just had to do this myself, you need to do it the other way around.
do not play with the vertical-align of your text
play with the vertical align of the font-awesome icon
<div>
<span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
<span class="my-text">hello world</span>
</div>
Of course you could not use inline styles and target it with your own css class. But this works in a copy paste fashion.
See here:
Vertical alignment of text and icon in button
If it were up to me however, I would not use the icon-2x. And simply specify the font-size myself, as in the following
<div class='my-fancy-container'>
<span class='my-icon icon-file-text'></span>
<span class='my-text'>Hello World</span>
</div>
.my-icon {
vertical-align: middle;
font-size: 40px;
}
.my-text {
font-family: "Courier-new";
}
.my-fancy-container {
border: 1px solid #ccc;
border-radius: 6px;
display: inline-block;
margin: 60px;
padding: 10px;
}
for a working example, please see JsFiddle

Answer 2

I use icons next to text 99% of the time so I made the change globally:
.fa-2x {
vertical-align: middle;
}
Add 3x, 4x, etc to the same definition as needed.

Answer 3

After considering all suggested options, the cleanest solution seems to be setting line-height and vertical-align everything:
See Jsfiddle Demo
CSS:
div {
border: 1px solid #ccc;
display: inline-block;
height: 50px;
margin: 60px;
padding: 10px;
}
#text, #ico {
line-height: 50px;
}
#ico {
vertical-align: middle;
}

Answer 4

if things aren't lining up, a simple line-height: inherit; via CSS on specific i.fa elements that are having alignment issues could do the trick simply enough.
You could also feasibly use a global solution, which due to a slightly higher CSS specificity will override FontAwesome's .fa rule which specifies line-height: 1 without requiring !important on the property:
i.fa {
line-height: inherit;
}
Just make sure that the above global solution doesn't cause any other issues in places where you might also use FontAwesome icons.

Answer 5

a flexbox option - font awesome 4.7 and below
FA 4.x Hosted 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>
fiddle
http://jsfiddle.net/Hastig/V7DLm/180/
using flex and font awesome 5
FA 5.x Hosted 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>
fiddle
https://jsfiddle.net/3bpjvof2/

Answer 6

The simplest way is to set the vertical-align css property to middle
i.fa {
vertical-align: middle;
}

Answer 7

This worked well for me.
i.fa {
line-height: 100%;
}

Answer 8

Try set your icon as height: 100%
You don't need to do anything with the wrapper (say, your button).
This requires Font Awesome 5. Not sure if it works for older FA versions.
.wrap svg {
height: 100%;
}
Note that the icon is actually a svg graphic.
Demo

Answer 9

For those using Bootstrap 4 is simple:
<span class="align-middle"><i class="fas fa-camera"></i></span>

Answer 10

Another option to fine-tune the line height of an icon is by using a percentage of the vertical-align property. Usually, 0% is a the bottom, and 100% at the top, but one could use negative values or more than a hundred to create interesting effects.
.my-element i.fa {
vertical-align: 100%; // top
vertical-align: 50%; // middle
vertical-align: 0%; // bottom
}

Answer 11

I would wrap the text in a so you can target it separately. Now if you float both and left, you can use line-height to control the vertical spacing of the . Setting it to the same height as the (30px) will middle align it. See here.
New Markup:
<div>
<i class='icon icon-2x icon-camera'></i>
<span id="text">hello world</span>
</div>
New CSS:
div {
border: 1px solid #ccc;
height: 30px;
margin: 60px;
padding: 4px;
vertical-align: middle;
}
i{
float: left;
}
#text{
line-height: 30px;
float: left;
}

Answer 12

When using a flexbox, vertical alignment of font awesome icons next to text can be very difficult. I tried margins and padding, but that moved all items. I tried different flex alignments like center, start, baseline, etc, to no avail. The easiest and cleanest way to adjust only the icon was to set it's containing div to position: relative; top: XX; This did the job perfectly.

Answer 13

Well, this question was asked years ago. I think technology has changed quite a bit and browser compatibility is much better. You could use vertical-align but I would consider that some what less scaleable and less reusable. I would recommend a flexbox approach.
Here is the same example the original poster used but with flexbox. It styles a single element. If a button size changes for whatever reason, it will continue to be vertically and horizontally centered.
.button {
border: 1px solid #ccc;
height: 40px;
margin: 60px;
padding: 4px;
display: flex;
justify-content: space-around;
align-items: center;
}
Example: JsFiddle

Answer 14

Simply define vertical-align property for the icon element:
div .icon {
vertical-align: middle;
}

Answer 15

for me, just making the element display gird, and aligning content works perfectly. simply solution.
.yourfontawesome<i>Element{
display: grid;
align-content: center;
}