Wie wird Text in einem ausgefüllten Eingabefeld/Feld ausgerichtet?

Ich mache eine Bewerbung für die Firma, mit der ich arbeite. Ich habe einen Teil des Frontends abgeschlossen und es gab ein kleines Problem, mit dem ich Hilfe brauchte. Der Code ist beiWie wird Text in einem ausgefüllten Eingabefeld/Feld ausgerichtet?

https://github.com/ZeusEm/AirIndia-WebAlert

Oder sonst können Sie die Zielseite gerade nach oben, indem Sie auf

http://zeusem.github.io/AirIndia-WebAlert/

input { 
 
    margin: 1em; 
 
    display: inline-block; 
 
    padding: 2em 19%; 
 
    max-width: 30vmin; 
 
}

<input class="data glowing-border" type="text" name="username" required="" autofocus="" placeholder="Username"> 
 
<input class="data glowing-border" type="password" name="password" required="" placeholder="Password">

schießen Wie Sie sehen können, die Eingabefelder haben ihren Platzhalter wegen der ext ra (notwendige) Polsterung gab ich. Kann mir hier jemand vorschlagen, wie der Platzhalter (und damit der Text) mit der linken Grenze des Eingabefeldes ausgerichtet wird?

Quelle

2016-05-29 Shubham Mehta

Sie damit sagen, dass die Polsterung dort sein muss, aber der Platz vor nicht sein sollte? – Harry

Genau. Das Padding wurde hinzugefügt, weil ich es so mobilfreundlich wie möglich machen möchte (und größere Boxgrößen helfen dabei). Aber ich möchte, dass der Text links oder in der Mitte ausgerichtet ist, weil das aktuelle Setup nur merkwürdig aussieht. –

Geht man nach Ihrer Aussage - * linksbündig oder zentriert * - können Sie einfach nicht den 'text-align: center' an den' Eingang' anhängen. Das sollte es lösen. Wenn Sie linksbündig sein möchten, können Sie versuchen, 'text-indent: - [padding-left]' zu verwenden. Aber was ich in der Vergangenheit gesehen habe, ist, dass ein Teil des Textes ausgeblendet wird. – Harry

Basierend auf Ihrer comment that either left or center align would be fine, würde ich vorschlagen, gehen mit Center-Align-Option mit text-align Center auf dem input Element. Diese Option wäre viel einfacher zu erreichen als linked mit Padding auszurichten.

input { 
 
    margin: 1em; 
 
    display: inline-block; 
 
    padding: 2em 19%; 
 
    max-width: 30vmin; 
 
    text-align: center; 
 
}

<input class="data glowing-border" type="text" name="username" required="" autofocus="" placeholder="Username"> 
 
<input class="data glowing-border" type="password" name="password" required="" placeholder="Password">

Quelle

2016-05-29 16:58:14 Harry

Wie wird Text in einem ausgefüllten Eingabefeld/Feld ausgerichtet?

Antwort

Verwandte Themen