input文本和label對齊

默認狀態(tài)下，也就是下面這樣, 文字和input是居中的。

成都創(chuàng)新互聯(lián)成都網站建設按需求定制設計，是成都網站營銷公司,為木托盤提供網站建設服務,有成熟的網站定制合作流程，提供網站定制設計服務：原型圖制作、網站創(chuàng)意設計、前端HTML5制作、后臺程序開發(fā)等。成都網站制作熱線：13518219792

    我是中國人
    

但是經常設計圖中有l(wèi)abel的行高，或者input的高度設計，默認狀態(tài)下，依然是居中的。但是很多時候label和input要浮動，一旦浮動，后面的input標簽就緊緊的貼住了label標簽，也就造成了視覺上看到并沒有居中。

比如下面：

    我是中國人
    
label {
    font-size: 12px;    float: left;
}input {    height: 20px;
}

渲染出來的效果是這樣

但是這并不是我想要的結果，所以通?？梢钥刂苐abel的padding-top，視覺上讓它看起來是居中的。就像下面一樣：

input單選框和label對齊

默認狀態(tài)下，label和radio是不對齊的，我們知道，input是內聯(lián)元素，但是它依然是可以設置高度和寬度的，因為它是內聯(lián)可替換元素。默認狀態(tài)下，radio是有margin值的，但是這并不是它影響label和radio是不居中的。默認效果如下:

    男x
    

因為label對齊的是文字的基線，所謂基線，就是x的底端。

如果我們浮動的話，會發(fā)生什么事情呢？

    男x
    
label {
    font-size: 30px;    float: left;
}

結果發(fā)現(xiàn)，浮動之后，radio緊緊的貼著label，并且位于頂端。

那么到底如何讓它們對齊呢?

    男x
    
label {
    font-size: 50px;
    vertical-align: middle;
}input {
    vertical-align: middle;
}

得出來的效果如下：

那么，我們再來測試一下，這種方法是否可以。設置label的高度。

    男x

    
label {
    font-size: 50px;    display: inline-block;    height: 140px;
    vertical-align: middle;
}input {
    vertical-align: middle;
}

結果顯示如下：

說明，這種方法可行。還可以設置padding測試，這里就不測試了。

總結：

同時設置label和input的vertical-align: middle就可以了。