關于label和input對齊的那些事

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就可以了。