Text in <input> vertikal zentrieren

[NNL]

Guten Tag!

Wir haben hier ein widerspenstiges kleines <input> in einem <td> vor uns, welches dieses komplett ausfüllen soll, dennoch aber den eingegebenen Text vertikal zentriert anzeigen soll, dies aber nicht tut.

Versucht habe ich bereits folgendes:

  
td  
{  
 border: 1px solid #000;  
 height: 2em;  
}  
td input, td select  
{  
 line-height: 2em;  
 width: 100%;  
 height: 100%;  
 background-color: #CCC;  
 vertical-align: middle;  
}  

Für eine mögliche Lösung wären euch sehr dankbar,
N, N und L

[suit]

wie wärs mit pseudozentrierung mittels line-height oder padding? da dir die höhe des elternelements bekannt ist (2em) ist das kein problem

[NNL]

wie wärs mit pseudozentrierung mittels line-height oder padding? da dir die höhe des elternelements bekannt ist (2em) ist das kein problem

Vielen Dank für die Hilfe,

leider funktionierte das aber nicht.
Sowohl line-height (s. erste Nachricht), als auch padding (padding: auto;) haben wir versucht.

Hoffen auf weitere Ideen!

N, N und L

[suit]

als auch padding (padding: auto;) haben wir versucht.

wie wärs mit einem padding-wert != auto

[NNL]

als auch padding (padding: auto;) haben wir versucht.

wie wärs mit einem padding-wert != auto

Hallo!

In der Tat liefert dies ein Lösung, jedoch nur unter der Voraussetzung, dass die Schriftgrößen im <input> und im <td>, an denen sich relative em-Werte ja orientieren, gleich sind.

Als vorläufige Lösung werde ich es aber wohl wie folgt verwenden:

td  
{  
 border: 1px solid #000;  
 height: 2em;  
}  
td input, td select  
{  
 line-height: 1em;  
 padding: 0.5em 0;  
 height: 2em;  
 width: 100%;  
 height: 100%;  
 background-color: #CCC;  
}

Danke!

[suit]

In der Tat liefert dies ein Lösung, jedoch nur unter der Voraussetzung, dass die Schriftgrößen im <input> und im <td>, an denen sich relative em-Werte ja orientieren, gleich sind.

nicht wahr - da em eine verhältnis zur eingestellten schriftgröße darstellt, kann dir das egal sein - 2em sind hausnummer 32px - dann ist 0.5em 8px - genausogut könnten 2em 40px sein und 0.5em 10px (von rundungsdifferenzen mal abgesehen)

du musst lediglich dafür sorgen, dass du auch die schriftgröße dediziert in em angibst