Wie kann ich Bilder und Text mittig ausrichten?

Symbole und Texte sind jeweils in einem Container, jedoch nicht mittig ausgerichtet.

Answer 1

[regex9]

Ausgehend von diesem einfachen Beispiel:

<ul>
  <li>
    <svg height="20" viewBox="0 0 20 20" width="20">
      <circle r="10" cx="10" cy="10" />
    </svg>
    <span>Some text</span>
  </li>
</ul>

Kann man mittels Flexbox die beiden Elemente vertikal zueinander zentrieren:

li {
  column-gap: 2px;
  display: flex;
  list-style-type: none;
}

span {
  line-height: 20px;
}

Eine Feinjustierung wird mittels Angabe einer passenden Zeilenhöhe erreicht.

In deinem Fall könnte die konkrete Positionierung der Icons noch eine Rolle spielen.