Text in Submitbuttons vertikal zentrieren

Vertikale Zentrierung in der Webentwicklung ist generell Teufelswerk. Mit der Zeit und ein paar Kniffen allerdings kann man auch diese Situationen meistern – Spaß macht es aber meistens trotzdem nicht und manchmal erfordert es extrem seltsames Markup.

Ein häufiges Problem ist das Zentrieren von Text in Submit Buttons von Formularen. Im Grunde funktioniert die Heransgehensweise einer festen Höhe mit einer Zeilenhöhe in gleicher Größe sehr gut – zumindest in webkit Browsern wie Chrome oder Safari. Im Firefox zum Beispiel führt das gerne mal zu nicht ganz perfekten Ergebnissen. Wir hatten da bei QUOTE.fm schon hitzige Diskussionen, die zum Glück beendet sind weil ich einen einfachen Weg gefunden habe.

Es ist offenbar so, dass Firefox noch irgendwas im Inneren des Buttons macht, trotz padding: 0;. Bei einem a-Tag passiert das nicht, nur beim Submitbutton.
Das Zauberwort zur Lösung heißt ::-moz-focus-inner und so funktioniert es:

<input class="add_comment" name="add_comment" type="submit" value="Comment" />

Dazu das passende CSS:

.add_comment {
    width: 80px;
    height: 28px;
    color: #fff;
    font-size: 13px;
    line-height: 28px;
    background: #0073a3;
    border: none;
}

.add_comment::-moz-focus-inner {
    border: 0;
}

Ich habe das ganze zur Demonstration und zum selbst herum testen bei jsfiddle noch mal nachgebaut.

Veröffentlicht am Dienstag, 13. März 2012

Kommentare