1.input 文字框 文字垂直置中對齊
表單預設input文字框文字並不垂直置中而在頂端，如何調整呢，可以通過css來調整垂直高度，代碼示範如下
| <input type="text" style="font-size:12px;line-height:45px; height:50px;" value="www.itstudy.cn"/> |
height: 設定input樣式的高度，line-height:設定input裡文字的行高度
heigth和line-height兩項必需同時設定，才會生效。
一般來說height和line-height的值 height的值要稍稍大一些。
但是上述方法在firefox中無效，如何?在ie和firefox下文字都垂直置中呢。可以不用line-height，代碼示範如下：
| <input type="text" style="font-size:12px;padding-top:15px; height:50px;" value="www.itstudy.cn"/> |
2.input 文字框 文字垂直置中對齊
在ie中文字垂直置中對齊的話:
在css中把line-height的屬性設定成height的高度即可。
可能有的瀏覽器如此設定依然不置中，此時可以使用padding屬性。
如果文字框有背景圖片的話就會向下凸出一塊，此時可以把max-height值設為height的值。
3.input文字框、文字、按鈕、圖片 垂直置中對齊的解決辦法
當我們在做使用者註冊、登陸及搜尋表單時，經常碰到文字、文字框、圖片、按鈕在一行時不能垂直置中對齊，本人今天遇到類似的問題，解決辦法是把form裡面的表單元素設定vertical-align:middle；屬性就OK，執行個體如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input 垂直置中對齊</title>
<style type="text/css">
*{ padding:0; margin:0; }
/* =search */
.search{ position:absolute; top:46px; right:49px; text-align:right; }
.search input{ vertical-align:middle; }
.searchkey{ width:248px; height:14px; *height:20px; _height:20px; line-height:20px; padding:6px 4px;*padding:3px 4px;_padding:3px 4px; background:#fdfdfd; border:1px solid #d4d6cb; }
</style>
</head>
<div class="search">
<form action="#" method="get" name="g3unionform">
<img src="http://hiphotos.baidu.com/wely_ton/abpic/item/5cbdee023bc133523912bbc4.jpg" width="35" height="28" />
<input name="searchkey" type="text" class="searchkey" />
<input name="subm" type="image" src="images/g3union_07.gif" />
</form>
</div>
<body>
</body>
</html>
效果如下圖：
4.寫個div 設個背景圖片，input背景設為透明
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
