Я пытаюсь вертикально выровнять держатель места для ввода текста.CSS Вертикальный выравнивать текст заполнителя
Я получил ::--webkit и :--moz правила, идущие, и они работают для других стилистики, но не вертикально совместив ...
Я попытался vertical-align: middle; в правилах WebKit, а под сам .input , Я также попытался line-height: <same as the input box height>
Может кто-нибудь увидеть простую вещь мне не хватает ??
спасибо !!
Одним из вариантов является изменение заполнителя форматирования шрифта для ввода (заполнитель наследует форматирование).
https://jsfiddle.net/rwh6hkc6/
html, body {
margin: 0;
}
.email.input {
text-indent: 40px;
font-family: "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
width: 400px;
border: none;
background-color: #FFCF6B;
font-size: 1.8em;
font-weight: 100;
padding: 10px 0;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #B1B1B1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #B1B1B1;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #B1B1B1;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #B1B1B1;
}<div class="centered">
<div class="input">
<input type="text" class="email input" name="email" placeholder="enter your email">
</div>
</div>Когда вы запускаете фрагмент кода, заполнитель не выровнен по вертикали – achref
Это связано с тем, что верхний и нижний интервалы варьируются в зависимости от шрифта. Просто проверьте с верхним и нижним слоем –
. Дело в том, что размер шрифта заполнителя отличается от размера шрифта ввода. – Liangjun
Weird! Я также использую Chrome ... –
Если вы разворачиваете его на большую высоту, где появляется заполнитель? – StardustGogeta
С большей высотой он появляется в середине, но определенно не на 60 пикселей, а на большей высоте я не могу 'vertical-align: top;' либо (не то, что я хочу): http://jsfiddle.net/dfuobnnn/Является ли текст вертикально выровненным: сверху для вас в этой скрипке? –