Центр заповнення текстового поля поля HTML

154

Як я можу відцентрувати вирівнювання заповнення заповнення поля у формі html?

Я використовую такий код, але він не працює:

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="support@socialpic.org" style="text-align: center" name="email" />
    <!<input type="submit" value="submit" />  
</form>

html css

— max_
джерело

Насправді не відповідь, але jQuery Mobile робить це, щоб ви могли подивитися, як вони цього досягають.

— Еванс

Для мене ваш код працює, коли ви позбудетеся від input.placeholderшматочка. Вирівнювання тексту всередині введення до центру вирівнює також заповнювач.

— Cannicide

284

Якщо ви хочете змінити лише стиль заповнення місця

::-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; 
}

— prarthana.m
джерело

5

Це добре працює для більшості полів введення, але не для дати введення. Чи знаєте ви, як зробити так, щоб він працював на побачення?

— Корнелій Паркін

92

input{
   text-align:center;
}

це все, що вам потрібно.

Робочий приклад у FF6. Цей метод, здається, не сумісний між веб-браузерами.

Ваш попередній CSS намагався центрувати текст вхідного елемента, який мав клас "заповнювач місця".

— Джеймі Діксон
джерело

5

Я не хочу зосередити заповнювач, а також текст, введений у поле

— макс_

1

Так. Ось що робить цей приклад. Заполнителем є текст у полі.

— Джеймі Діксон

2

у прикладі це не працює. У прикладі, заповнювач місця заповнюється зліва.

— max_

Обережно, якщо ви використовуєте такі бібліотеки, як Bootstrap або Semantic UI, ви повинні додати стиль вбудованого стилю, тобто <input type="text" placeholder="Search..." style="text-align: right;">для його роботи. Або додайте important!до свого правила CSS, якщо ви використовуєте зовнішні файли.

— Бехдад

Схоже, що проблема у вас max_ - це лише питання сумісності браузера. Це добре працює в більшості основних браузерів, крім Safari.

— Cannicide

7

Елемент-заповнювач HTML5 може бути призначений для тих браузерів, які приймають елемент, але різними способами, як ви бачите тут: http://davidwalsh.name/html5-placeholder-css .

Але я не вірю, що text-alignце буде трактуватися браузерами. Принаймні в Chrome цей атрибут ігнорується. Але ви завжди можете змінити інші речі, наприклад color, font-sizeі font-familyт. Д. Я пропоную вам переосмислити свій дизайн, чи можливо видалити цю поведінку центру.

EDIT

Якщо ви дійсно хочете, щоб цей текст був зосереджений, ви завжди можете використовувати якийсь код jQuery або плагін для імітації поведінки заповнювача. Ось його зразок: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html .

Таким чином буде працювати стиль:

input.placeholder {
    text-align: center;
}

— Ерік Петручеллі
джерело

7

Ви можете зробити так:

    <center>
    <form action="" method="POST">
    <input type="text" class="emailField" placeholder="support@socialpic.org" style="text-align: center" name="email" />
    <input type="submit" value="submit" />  
</form>
    </center>

Робочий код тут

— Ян Девід Бочоака
джерело

Тільки це працює на мене. Можливо стилям, доданим у HTML, надається більший пріоритет або переосмислення всіх інших стилів.

— Гокуль

5

Це добре працює для моїх потреб, ви повинні перевірити сумісність для свого браузера, у мене не було проблем, тому що я не переймався зворотною сумісністю

.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; 
}

— Денис
джерело

3

Чи не ця відповідь є прямою копією іншої відповіді?

— Анвар

3

Ви також можете використовувати цей спосіб для написання css для заповнювача

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

— Анкіт Джайсваль
джерело

2

Ви можете спробувати так:

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

— Рані Утамі
джерело

1

::-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;
}

— Рудреш Бхатт
джерело

0

Використовуючи фрагмент коду, наведений нижче, ви вибираєте заповнювач місця всередині вашого вводу, і будь-який код, розміщений всередині, впливатиме тільки на заповнювач.

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

— Брендон Мей
джерело

Ця відповідь, схоже, не пропонує нічого іншого порівняно з прийнятим відповіддю .

— Антон

Ця відповідь дає натяк на те, як змінити заповнювач лише одного конкретного елемента на відміну від усіх заповнювачів. Напр .foo::-webkit-input-placeholder { … }.

— Генрік N

0

Ви можете використовувати набір у такому класі, як нижче, і встановити для введення текстового класу
CSS:

 .place-holder-center::placeholder {
        text-align: center;
    }

HTML:

<input type="text" class="place-holder-center">

— Мохаммед Далірі
джерело