✔ Input button text ausrichten

[hoctar]

Hallo
also ich kann ja mit text-indent den text in <input type="submit" value="text" /> horizontal ausrichten.
Nun frage ich mich wie ich den Text vertikal ausrichten kann.

 

[Maik]

Hi,

text-align ist die CSS-Eigenschaft deiner Wahl, um die Button-Beschriftung horizontal auszurichten.

Ebenso lässt sich mit einem horizontalen Innenabstand (padding-right u. padding-left) an der horizontalen Ausrichtung im Bezug zum rechten und linken Rand des Buttons etwas drehen.

Und du bist dir sicher, mit text-indent die Beschriftung vertikal ausrichten zu können?

Diese Eigenschaft dient nämlich zur horizontalen Einrückung der ersten Zeile bei Textabsätzen bzw. Textblöcken (positiver Wert = Einrückung nach rechts, negativer Wert = Ein- bzw. Ausrückung nach links), siehe hierzu auch das dazugehörige Beispiel text-indent.

mfg Maik

 

[hoctar]

Ah stimmt sorry Maik, ich meinte,wie kann ich die Schrift vertikal ausrichten
Mit text-indent kann ich sie ja horizontal ausrichten.

Leider verschiebt padding-top nicht die Schrift, sondern den äuseren Rand nach außen.

 

[Maik]

Ich weiß ja nicht, was du dir da konkret vorstellst, gerade mit Blick auf die Dimensionen des Buttons, aber mit diesem CSS sitzt die Button-Beschriftung grundsätzlich in der vertikalen Mitte:

input[type=submit] {
border:0; /* Rahmen deaktivieren */
font-size:.8em; /* Schriftgröße */
padding:.2em 0; /* Innenabstand oben/unten - rechts/links */
}

An meinen hier frei gewählten Werten für die Schriftgröße und den vertikalen Innenabstand mußt du natürlich noch etwas schrauben, um sie deinen Vorstellungen anzupassen

mfg Maik

 

[hoctar]

Super, vielen Dank Maik