如何让文本垂直居中对齐文本框

快乐打工仔 分类:实例代码

在标准浏览器中,同一行的文本能够和文本框垂直居中对齐。但是在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

如何让文本垂直居中对齐文本框,这样的场景在实际项目中还是用的比较多的,关于如何让文本垂直居中对齐文本框就介绍到这了。

如何让文本垂直居中对齐文本框属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容