How to align text and :before icon vertically center?

Question

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>

score 0 · Answer 1 · answered May 04 '22 at 16:23

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

score 0 · Accepted Answer · answered May 04 '22 at 16:27

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>

Works fine! However I have used inline-flex as suggested by @JamesHooper as it suits my needs better. — Snorlax, May 04 '22 at 16:51

Crystal · Answer 3 · 2022-05-04T16:38:53.970

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>

score -1 · Answer 4 · answered May 04 '22 at 16:23

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

score -1 · Answer 5 · answered May 04 '22 at 16:29

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

}

How to align text and :before icon vertically center?

5 Answers5