如何让文本垂直居中对齐文本框
分类：实例代码
在标准浏览器中，同一行的文本能够和文本框垂直居中对齐。但是在IE8和IE8以下的浏览器中，文本是靠文本框顶部或者底端对齐的，由于现在IE8还有大量的用户，下面就简单介绍一下如何在IE8和IE8以下浏览器中实现此效果。
实例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
input{
height:50px;
border:1px solid red;
}
</style>
<body>
<div>前端教程网<input type="mytest" /></div>
</body>
</html>
在IE8或者IE8以下浏览器中运行以上代码，并不能实现文本和文本垂直居中对齐。
代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
input{
height:50px;
border:1px solid red;
vertical-align:middle;
}
</style>
<body>
<div>前端教程网<input type="mytest" /></div>
</body>
</html>
以上代码实现了我们想要的效果，在所有的主流浏览器中都可以实现文本和文本框垂直居中对齐效果。
方法就是在添以下代码即可:
vertical-align:middle
如何让文本垂直居中对齐文本框，这样的场景在实际项目中还是用的比较多的，关于如何让文本垂直居中对齐文本框就介绍到这了。
如何让文本垂直居中对齐文本框属于前端实例代码，有关更多实例代码大家可以查看。