input文本框文字垂直居中

最新推荐文章于 2021-05-30 21:57:59 发布

最新推荐文章于 2021-05-30 21:57:59 发布 · 499 阅读

文章标签：

#php #开发工具

本文介绍如何通过CSS调整HTML表单中的input文本框使内部文字垂直居中显示，并提供两种不同方法分别适用于IE和Firefox等浏览器。

表单默认input文本框文字并不垂直居中而在顶端，如何调整呢，可以通过css来调整垂直高度，代码演示如下

<inputtype="text"style="font-size:12px;line-height:45px;height:50px;"value="www.itstudy.cn"/>

height:设置input样式的高度，line-height:设置input里文字的行高度

heigth和line-height两项必需同时设置，才能生效！
一般来说height和line-height的值height的值要稍稍大一些。

但是上述方法在firefox中无效，如何实现在ie和firefox下文字都垂直居中呢？可以不用line-height，代码演示如下：

<inputtype="text"style="font-size:12px;padding-top:15px;height:50px;"value="www.itstudy.cn"/>

padding-top样式的内上边距。