HTML/CSS Text and Icon vertically centered in same line

user_12660725 0
Viewed 981

I have to center those icons vertically center to the text. But its off for a few pixel. I have tried a bunch of stuff now but thats the best I could come up with. Any idea why it is not working?

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

Result:

user-interface css html
1 Answers
.listItem {
  display: flex;
  list-style: none;
  margin-bottom: 1rem;
  align-items: center
}

On listItem class, add this css option: align-items: center

user_82028500
Related