input文字框和img圖片能夠垂直居中對齊程式碼例項

antzone發表於2017-03-18

可能不少朋友遇到這樣的問題，那就是當一個文字框和一個圖片在同一行的時候，它們兩個預設是無法垂直居中的，下面就通過程式碼例項介紹一下如何使其能夠上下垂直居中，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
img{
  vertical-align:middle;
}
</style>
</head> 
<body> 
<div>
  <input type="text" value="請輸入驗證碼">
  <img src="mytest/html/checkcode.jpg"/>
</div>
</body> 
</html>

上面的程式碼實現了文字框和驗證碼圖片的垂直居中對齊效果，只要為圖片新增如下屬性即可:

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

相關文章