谷歌浏览器中文本框光标居中和字体大小显示
分类：实例代码
通常情况下设置文本框中的字体垂直居中显示会使用以下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#text{
height:50px;
line-height:50px;
font-size:12px;
}
</style>
</head>
<body>
<input type="text" id="text" value="前端教程网欢迎您"/>
</body>
</html>
文本可以在文本框中垂直居中显示，在IE和火狐浏览器中没有任何问题，光标会大小和字体大小相同，但在谷歌浏览器中并非如此，当文本框没有文字的时候，光标大小和文本框高度相同，输入文字的时候，光标从文字底部到文本框顶部显示。
特别说明:
在IE8以上、谷歌和火狐等浏览器中，line-height属性不是必须的，默认情况下文本就是垂直居中对齐。
如果去掉line-height属性，谷歌浏览器就可以和其他标准浏览器效果一致，利用特点写代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#text{
height:50px;
.line-height:50px;/*IE6、7、8识别*/
}
</style>
</head>
<body>
<input type="text" id="text" value="前端教程网欢迎您"/>
</body>
</html>
以上代码可以实现兼容各个主流浏览器的效果。
谷歌浏览器中文本框光标居中和字体大小显示，这样的场景在实际项目中还是用的比较多的，关于谷歌浏览器中文本框光标居中和字体大小显示就介绍到这了。
谷歌浏览器中文本框光标居中和字体大小显示属于前端实例代码，有关更多实例代码大家可以查看。