input文本和label對齊
默認狀態下，也就是下面這樣, 文字和input是居中的。
<div> <label>我是中國人</label> <input type="text"> </div>但是經常設計圖中有label的行高，或者input的高度設計，默認狀態下，依然是居中的。但是很多時候label和input要浮動，一旦浮動，后面的input標簽就緊緊的貼住了label標簽，也就造成了視覺上看到並沒有居中。
比如下面：
<div> <label>我是中國人</label> <input type="text"> </div> label { font-size: 12px; float: left; } input { height: 20px; }渲染出來的效果是這樣
但是這並不是我想要的結果，所以通常可以控制label的padding-top，視覺上讓它看起來是居中的。就像下面一樣：
input單選框和label對齊
默認狀態下，label和radio是不對齊的，我們知道，input是內聯元素，但是它依然是可以設置高度和寬度的，因為它是內聯可替換元素。默認狀態下，radio是有margin值的，但是這並不是它影響label和radio是不居中的。默認效果如下:
<div> <label>男x</label> <input type="radio"> </div>
因為label對齊的是文字的基線，所謂基線，就是x的底端。
如果我們浮動的話，會發生什么事情呢？
<div> <label>男x</label> <input type="radio"> </div> label { font-size: 30px; float: left; }
結果發現，浮動之后，radio緊緊的貼着label，並且位於頂端。
那么到底如何讓它們對齊呢?
<div> <label>男x</label> <input type="radio"> </div> label { font-size: 50px; vertical-align: middle; } input { vertical-align: middle; }得出來的效果如下：
那么，我們再來測試一下，這種方法是否可以。設置label的高度。
<div> <label>男x</label> <input type="radio"> </div> label { font-size: 50px; display: inline-block; height: 140px; vertical-align: middle; } input { vertical-align: middle; }結果顯示如下：
說明，這種方法可行。還可以設置padding測試，這里就不測試了。
總結：
同時設置label和input的vertical-align: middle就可以了。