'How to align text and :before icon vertically center? [duplicate]

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>
htmlcssbackgroundvertical-alignment


Solution 1:[1]

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>

Solution 2:[2]

The best way would be to utilise flexbox:

CSS:

.status {
  display: inline-flex; // flex or inline-flex here
}

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

Solution 3:[3]

if its just 1 line of code You can simply add center tag to align both of them in the middle, inline-flex then align-items center to be vertically align Let me know if this is what you mean.

.status {
    display: inline-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;
 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">

<center><div class="status success">Purchased</div></center>

Solution 4:[4]

.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: 10px;
}

Solution 5:[5]

this worked for me

.status {
    display: inline;
    position: relative;
}

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

.success:before {
    position: absolute;
    font-family: FontAwesome;
    content: "\f111";
    font-size: 10px;
    margin-right: 16px;
    color: #27ae60;
    transform: translate(-25px, 21px);

}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gerard
Solution 2 James Hooper
Solution 3
Solution 4 H_Scott
Solution 5 mohamed hesham

Related Questions