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

Question

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 10 months ago.
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>

Answer 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>

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

Answer 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>

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

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