Grundlinienversatz bei unterschiedlichen Schriftgrößen lösen

Im Zuge eines Flexbox-Designs zeigte sich ein interessantes Problem mit unterschiedlichen Schriftgrößen. Es sollten mehrere Schaltflächen dargestellt werden, auf denen mit Flexbox ein Schriftsymbol und ein Text darsgestellt wurde. Das Schriftsymbol wechselte zwischen groß und klein, der Text blieb bei normaler Höhe.

Das funktionierte im Grunde problemlos. Schriften und Symbolen waren in einer Reihe auf auf derselben Höhe. Hatte aber einer der Buttons kein Symbol, dann verrutschte das gesamte Element einige Pixel. Symbol und Schrift blieben zentriert, der Button selbst unterragte aber die anderen.

Die Schriftgröße von Symbol und Text ist unterschiedlich. Das führt zu einem Versatz.

Der dazugehörige CSS-Code ist überschaubar. Ihr findet das Beispiel zum Rumprobieren auch bei Codepen.

button.flex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}
button.flex > .icon {
  font-size: 1.333rem;
}
button.flex > .text {
  font-size: 1rem;
}

Nach vielen verschiedenen Versuchen, das Problem zu lösen, verstand ich irgendwann, woran es lag. Die Schriftgröße jedes ersten Kindelements einer Schaltfläche legte den Grundstein für die Höhenberechnung und sorgte somit für die Ausrichtung der gesamten Elements. Die Lösung war dann, jeder Schaltfläche ein leeres Inhaltselement vorzusetzen.

button.flex:before { content:""; }

Das ist nicht die eleganteste Lösung und ich würde eine andere bevorzugen, sie erfüllt allerdings ihren Zweck sehr gut und funktioniert bis runter zum Internet Explorer 11.