[FIXED] How to vertically center text with larger icon?

Issue

I am using a Font Awesome icon in the modal of success. I want to make the icon bigger, the problem is the text is no longer vertically centered if I do that.

<div class="alert alert-success alert-dismissible">
  <span class="fa fa-check-circle" aria-hidden="true" style="font-size: 32px;"></span>
  <strong> You have successfully set up an administration for this client.</strong>
</div>

Solution

You can use vertical-align:

.fa {
  vertical-align: middle;
}

jsFiddle

Or, use flexbox:

.alert {
  display: flex;
  align-items: center;
}

jsFiddle

Answered By - Stickers

Answer Checked By - Mildred Charles (PHPFixing Admin)