I am struggling to align these icons vertically center with the text. However, there seems to be a slight offset of a few pixels. I have experimented with different solutions, but this is the closest I could get to. Can anyone explain why it's not aligning perfectly?
HTML
<div class="listItem">
<div class="listItem__pre">
<span class="icon icon--account-logout"></span>
</div>
<div class="listItem__content">
<p>Max Muster</p>
</div>
<div class="listItem__post">
<span class="icon icon--account-logout"></span>
</div>
</div>
CSS
.listItem {
display: flex;
list-style: none;
margin-bottom: 1rem;
}
.listItem__content {
flex-grow: 1;
> * {
width: fit-content;
margin: 0;
}
}
.listItem__pre {
margin-right: 0.8rem;
align-self: center;
}
.listItem__post {
margin-left: 0.8rem;
align-self: center;
}