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

Spread the love

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.

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;.

To center text vertically with a large font-awesome icon with CSS, we use flexbox.