Входной заполнитель вертикального выравнивания

Как правильно поместить вертикальный центр в поле ввода?Входной заполнитель вертикального выравнивания

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

Вот код https://jsfiddle.net/u6qfwg3w/

источник

2016-08-09 Razvan Cuceu

кажется в центре, вы имеете в виду по горизонтали? – Ivan

@ Ивана не очень. Может быть, потому, что я использую Chrome? https://s10.postimg.org/416p2ph2x/center.jpg –

Вы забыли добавить этот css к input элемент:

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

Вот скрипка: fiddle link

источник

2016-08-09 15:29:33

Спасибо, ваш ответ полезен, но что, если я не хочу, чтобы входной текст имел размер шрифта 30px? Если нет решения, я воспользуюсь вашим ответом. –

Я собираюсь отметить этот ответ как решение, потому что я буду придерживаться этого. Но если у кого-то есть ответ для будущих товарищей, которые будут спотыкаться на это, можете опубликовать его здесь. –

@ RazvanCuceu, возможно, вы можете применить позиции к заполнителю, возможно, это сработает. Пытаться! –

Я считаю, что, как вы установили min-height: 45px вы должны установить line-height: 45px тоже в input[type=text].

См. Это для placeholder, если вы меняетесь font-size, то заполнитель будет находиться в вертикальном положении.

Пожалуйста, дайте мне знать ваши отзывы. Благодаря!

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

источник

2016-08-09 15:45:23 kukkuz

Входной заполнитель вертикального выравнивания

ответ

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