Eingabe Platzhalter vertikale Ausrichtung

Wie Platzhalter in einem Eingabefeld richtig vertikal zentriert werden? HierEingabe Platzhalter vertikale Ausrichtung

input[type='text']{ 
    background-color: rgba(255,255,255,.4); 
    border:3px solid rgba(0,0,0,.5); 
    min-height: 45px; 
    border-radius: 6px; 
    color:#fff; 
} 
input[type='text']::-webkit-input-placeholder { 
    font-size: 30px; 
    color: rgba(255, 255, 255, 0.4); 
    line-height: 30px; 
    text-transform: uppercase; 
    vertical-align: middle; 
}

ist der Code https://jsfiddle.net/u6qfwg3w/

Quelle

2016-08-09 Razvan Cuceu

scheint zentriert, meinen Sie horizontal? – Ivan

@Ivan nicht wirklich. Vielleicht, weil ich Chrome verwende? https://s10.postimg.org/416p2ph2x/center.jpg –

Sie haben vergessen, diese css zu input Element hinzuzufügen:

input[type='text']{ 
font-size: 30px; 
color: rgba(255, 255, 255, 0.4); 
line-height: 30px; 
}

Hier ist die Geige: fiddle link

Quelle

2016-08-09 15:29:33

Danke, Ihre Antwort ist nützlich, aber was, wenn ich nicht möchte, dass der eingegebene Text 30px Schriftgröße ist? Wenn es keine Lösung gibt, werde ich Ihre Antwort verwenden. –

Ich werde diese Antwort als die Lösung markieren, weil ich dabei bleiben werde. Aber wenn jemand eine Antwort für zukünftige Mitmenschen hat, die darüber stolpern, kann man es hier posten. –

@RazvanCuceu, vielleicht können Sie Positionen auf Platzhalter anwenden, vielleicht wird es funktionieren. Versuchen! –

Ich glaube, dass, wie Sie festgelegt haben min-height: 45px sollten Sie auch line-height: 45px insetzen.

Sehen Sie, dass für die placeholder, wenn Sie font-size variieren, bleibt der Platzhalter vertikal zentriert.

Bitte lassen Sie mich Ihr Feedback wissen. Vielen Dank!

input[type='text']{ 
    background-color: rgba(255,255,255,.4); 
    border:3px solid rgba(0,0,0,.5); 
    min-height: 45px; 
    line-height: 45px; 
    border-radius: 6px; 
    color:#fff; 
} 
input[type='text']::-webkit-input-placeholder { 
    font-size: 25px; 
    color: rgba(255, 255, 255, 0.4); 
    text-transform: uppercase; 
    vertical-align: middle; 
}

fiddle here

Quelle

2016-08-09 15:45:23 kukkuz

Eingabe Platzhalter vertikale Ausrichtung

Antwort

Verwandte Themen