Środkowy znacznik pola wprowadzania tekstu w polu HTML

116

Jak wycentrować wyrównanie elementu wejściowego pola tekstowego w formularzu HTML?Środkowy znacznik pola wprowadzania tekstu w polu HTML

używam następujący kod, ale to nie działa:

CSS ->

input.placeholder { 
    text-align: center; 
} 
.emailField { 
    top:413px; 
    right:290px; 
    width: 355px; 
    height: 30px; 
    position: absolute; 
    border: none; 
    font-size: 17; 
    text-align: center; 
}

HTML ->

<form action="" method="POST"> 
    <input type="text" class="emailField" placeholder="[email protected]" style="text-align: center" name="email" /> 
    <!<input type="submit" value="submit" /> 
</form>

Źródło

2011-09-11 max_

można pokazać swoją HTML? – Will

Naprawdę nie jest to odpowiedź, ale jQuery Mobile robi to, więc możesz chcieć zobaczyć, jak to osiągnąć. – Evans

Dla mnie twój kod działa, gdy pozbędziesz się bit 'input.placeholder'. Dopasowanie tekstu wewnątrz wejścia do środka wyrównuje również symbol zastępczy. – IamGuest

219

Jeśli chcesz zmienić tylko styl symbol zastępczy

::-webkit-input-placeholder { 
    text-align: center; 
} 

:-moz-placeholder { /* Firefox 18- */ 
    text-align: center; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    text-align: center; 
} 

:-ms-input-placeholder { 
    text-align: center; 
}

Źródło

2013-03-13 06:06:30

Działa to dobrze dla większości pól wejściowych, ale nie dla daty typu. Czy wiesz, jak sprawić, by działało na czas? –

input{ 
    text-align:center; 
}

jest wszystko, czego potrzebujemy.

Working example w FF6. Ta metoda nie jest zgodna z wieloma przeglądarkami.

Twój poprzedni CSS próbował wyśrodkować tekst elementu wejściowego, który miał klasę "placeholder".

Źródło

2011-09-11 21:44:50

Nie chcę wyśrodkować symbolu zastępczego ani tekstu wprowadzonego do pola –

Tak. Oto, co robi ten przykład. Symbol zastępczy _jest_ tekst w polu. –

to nie działa w przykładzie. W tym przykładzie symbol zastępczy jest wyrównany do lewej. –

Element zastępczy HTML5 może być stylizowany dla tych przeglądarek, które akceptują ten element, ale w różny sposób, co można zobaczyć tutaj: http://davidwalsh.name/html5-placeholder-css.

Ale nie wierzę, że text-align będzie interpretowany przez przeglądarki. Przynajmniej w Chrome ten atrybut jest ignorowany. Ale zawsze możesz zmienić inne rzeczy, takie jak color, font-size, font-family itd. Sugeruję, abyś przemyślał swój projekt, czy to możliwe, aby usunąć to centralne zachowanie.

EDIT

Jeśli naprawdę chcesz ten tekst wyśrodkowany, zawsze można użyć kodu jQuery lub wtyczki do symulacji zachowania zastępczego. Oto jego przykład: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html.

ten sposób styl będzie działać:

input.placeholder { 
    text-align: center; 
}

Źródło

2011-09-11 21:45:29

to działa dobrze dla moich potrzeb, należy sprawdzić kompatybilność przeglądarce, Nie miałem problemów, ponieważ nie dbałem o kompatybilność wsteczną.

.inputclass::-webkit-input-placeholder { 
text-align: center; 
} 
.inputclass:-moz-placeholder { /* Firefox 18- */ 
text-align: center; 
} 
.inputclass::-moz-placeholder { /* Firefox 19+ */ 
text-align: center; 
} 
.inputclass:-ms-input-placeholder { 
text-align: center; 
}

Źródło

2015-07-03 13:37:53 Denis

Czy ta odpowiedź nie jest bezpośrednią kopią innej odpowiedzi? – Anwar

@Awarwar nah, Właśnie doświadczasz Déjà vu – konzo

Można zrobić tak:

<center> 
    <form action="" method="POST"> 
    <input type="text" class="emailField" placeholder="[email protected]" style="text-align: center" name="email" /> 
    <input type="submit" value="submit" /> 
</form> 
    </center>

Working CodePen here

Źródło

2016-03-18 19:33:11

Tylko to działa dla mnie. Być może style dodane w HTML mają większy priorytet lub nadpisują wszystkie inne style. – Gokul

::-webkit-input-placeholder { 
font-size: 14px; 
color: #d0cdfa; 
text-transform: uppercase; 
text-transform: uppercase; 
text-align: center; 
font-weight: bold; 
} 
:-moz-placeholder { 
font-size:14px; 
color: #d0cdfa; 
text-transform: uppercase; 
text-align: center; 
font-weight: bold; 
} 
::-moz-placeholder { 
font-size: 14px; 
color: #d0cdfa; 
text-transform: uppercase; 
text-align: center; 
font-weight: bold; 
} 
:-ms-input-placeholder { 
font-size: 14px; 
color: #d0cdfa; 
text-transform: uppercase; 
text-align: center; 
font-weight: bold; 
}

Źródło

2016-06-16 11:38:18

Możesz spróbować tak:

input[placeholder] { 
    text-align: center; 
}

Źródło

2017-10-15 13:45:18

Środkowy znacznik pola wprowadzania tekstu w polu HTML

Odpowiedz

Powiązane problemy