Buttons korrekt ausrichten

[Matthias Scharwies]

Guten Morgen!

Hallo alle,

Vertical Alignment bringt mich noch um den Verstand.

Ich hab da zwei Buttons. Einer hat Text mit Subscript. Wie kriege ich es hin, dass die Texte beider Buttons auf einer Linie sind und die Buttons auf gleicher Höhe? Und zwar ohne Pixelfrickelei.

Also so ein Billig-HTML, bis auf das ₁₀.

<p>Funktionen: 
  <button name="wurzel">Wurzel</button>
  <button name="logarithmus">log<sub>10</sub></button>
</p>

Wenn ich es einfach so lasse, richtet der Browser (Chrome) die Texte in Normalschrift auf einer Linie aus. Das Subscript in einem Button führt dazu, dass der Textinhalt des Buttons im Button nach oben rutscht. Und damit der ganze Button, durch die Baseline-Ausrichtung, nach unten.

Ich kriege es nicht hin, den Subscript-haltigen Text im Button so auszurichten wie den Subscript-freien Text. Ein vertical-align auf die Buttons bringt die Buttons auf Linie, aber dann ist "Wurzel" und "log" nicht auf einer Linie. Eine Flexbox hat den gleichen Effekt.

Zur Visualisierung ein jsfiddle mit großem Font und einer zurechtgeschobenen Hilfslinie, damit man die Verschiebung sieht. Ich hoffe, es passt halbwegs auf anderen Browsern…

https://jsfiddle.net/Rolf_b/3Lm6ewx4/

Ich habe bei .t2 noch eine line-height eingefügt - wäre das schon eine magic number?

.t2 button {
  vertical-align: middle;
  line-height: 1.5em;
}

BTW: Im Firefox sah es ja schon vorher gut aus; jetzt auch im Chrome!

Herzliche Grüße und ein schönes langes Wochenende!

Matthias Scharwies