How to align text and :before icon vertically center?

May 4, 2022

I’m trying to vertically center icon and text in a background, but I guess I’m doing something wrong. The dot before the text is not perfectly centered with the background. Why is this happening ?

Is there a better way to do this ? Sorry but I’m new.

.status {
    display: inline;
}

.success {
    font-family: roboto;
    color: #27ae60;
    background: #e1e1e1;
    border-radius: 50px;
    padding: 0px 50px 0px 50px;
    font-size: 38px;
}

.success:before {
   font-family: FontAwesome; 
   content: "\f111"; 
   font-size: 10px;
   margin-right: 16px;
   color: #27ae60;
   vertical-align: middle;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">

<div class="status success">Purchuased</div>

>Solution :

You can use a flexbox or grid to center the text en icon perfectly.
Below an example using flexbox.

.status {
    /* Added */
    display: flex;
    align-items: center;
}

.success {
    font-family: roboto;
    color: #27ae60;
    background: #e1e1e1;
    border-radius: 50px;
    padding: 0px 50px 0px 50px;
    font-size: 38px;
}

.success:before {
   font-family: FontAwesome; 
   content: "\f111"; 
   font-size: 10px;
   margin-right: 16px;
   color: #27ae60;
   /* vertical-align: middle; Removed */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">

<div class="status success">Purchuased</div>