如何讓文字垂直居中對齊文字框

admin發表於2017-02-20

在標準瀏覽器中，同一行的文字能夠和文字框垂直居中對齊。但是在IE8和IE8以下的瀏覽器中，文字是靠文字框頂部或者底端對齊的，由於現在IE8還有大量的使用者，下面就簡單介紹一下如何在IE8和IE8以下瀏覽器中實現此效果。

例項程式碼: 

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
input{ 
  height:50px; 
  border:1px solid red; 
} 
</style> 
<body> 
<div>螞蟻部落<input type="mytest" /></div> 
</body> 
</html>

在IE8或者IE8以下瀏覽器中執行以上程式碼，並不能實現文字和文字垂直居中對齊。

程式碼例項: 

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

以上程式碼實現了我們想要的效果，在所有的主流瀏覽器中都可以實現文字和文字框垂直居中對齊效果。

方法就是在添以下程式碼即可:

[CSS] 純文字檢視 複製程式碼
vertical-align:middle

相關文章