Nir*_*tel 28 css placeholder mobile-safari vertical-alignment ios5
我想垂直居中在页面上输入文本框中输入的文本.
实现此目的的典型方法是将线高和高度设置为相等.这适用于iOS 5.0之前的Safari.
然而; 在iOS 5上,Safari显示垂直居中的键入文本...但占位符文本和光标显示为顶部对齐.
.txtBox {
line-height: 3em;
height: 3em;
}
Run Code Online (Sandbox Code Playgroud)
<input type="text" class="txtBox" placeholder="Name"></input>
其他人面临这个问题?
Jes*_*sse 36
设置line-height: 1;似乎解决了这个问题.
Mar*_*cel 36
对我来说,只有一种解决方案在我测试的所有浏览器中看起来都非常完美(Chrome,FF,Safari(+ iOS),IE10):
line-height: normal;
类似的解决方案line-height: 100%,并line-height: 1;似乎对输入的顶部,尤其是在Chrome对齐.
比较:
小智 8
您应该使用百分比作为行高.
.txtBox {
line-height: 100%;
height: 3em;
}
<input type="text" class="txtBox" placeholder="Name"></input>
Run Code Online (Sandbox Code Playgroud)