Как выровнять текст в заполненном поле ввода/поле?

Я делаю заявку на компанию, с которой я интернирую. Я выполнил часть интерфейса, и мне была нужна небольшая проблема. Код наКак выровнять текст в заполненном поле ввода/поле?

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

Или же вы можете расстрелять целевую страницу прямо вверх, нажав

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">

Как вы можете видеть, поля ввода имеют их местозаполнитель, привезенный слева из-за ext ra (обязательно) обивка я дал. Может ли кто-нибудь здесь предложить мне что-то, как выровнять заполнитель (и, следовательно, текст) с левой границей поля ввода?

источник

2016-05-29 Shubham Mehta

Вы хотите сказать, что обивка должна быть там, но пространство до этого не должно быть? – Harry

Точно. Добавлена добавка, потому что я хочу сделать это максимально удобным для мобильных устройств (и в этом помогут более крупные размеры ящиков). Но я хочу, чтобы текст был оставлен или выровнен по центру, потому что текущая настройка выглядит просто странно. –

Переход по вашему утверждению - * выравнивание по левому краю или по центру * - вы не можете просто добавить 'text-align: center' в' input'. Это должно решить. Если вы хотите выровнять по левому краю, вы можете попробовать использовать «text-indent: - [padding-left]», но то, что я видел в прошлом, это то, что он скрывает часть текста. – Harry

Основываясь на вашем comment that either left or center align would be fine, я бы предложил перейти с выравниванием по центру, используя text-align центр на элементе input. Этот вариант будет намного легче достичь, чем выравнивание по левому краю с дополнением.

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">

источник

2016-05-29 16:58:14 Harry

Как выровнять текст в заполненном поле ввода/поле?

ответ

Смежные вопросы