Sometimes, we want to center text vertically with a large font-awesome icon with CSS.
In this article, we’ll look at how to center text vertically with a large font-awesome icon with CSS.
How to center text vertically with a large font-awesome icon with CSS?
To center text vertically with a large font-awesome icon with CSS, we use flexbox.
For instance, we write
<div>
<i class="icon icon-2x icon-camera"></i>
hello world
</div>
to add the icon in the div.
Then we write
div {
display: inline-flex;
align-items: center;
line-height: 40px;
padding: 0px 10px;
border: 1px solid #ccc;
}
to make the div a flex container with display: inline-flex;
.
Then we make its content vertically centered with align-items: center;
.
Conclusion
To center text vertically with a large font-awesome icon with CSS, we use flexbox.