如何垂直對齊標簽和文本框？

Question

我有以下頁面，如下所示：

注意文本字段如何與標簽不對齊 。 我該如何解決。

這是html代碼：

<div class="main-body">
    <div id="search-box">
        <label class="label-major text-field-label" for="search">
            Find:
        </label>
        <input type="text" name="search" class="text-field-control-major" />
    </div>
</div>

這是CSS：

.label-section, .label-major {
    font-size: 2.5em;
    font-family: "courier new";
    display: inline-block;
}

.label-major {
    font-weight: bold;
}

.text-field, .text-field-control-major, .text-field-control-compressed, .text-field-form-input {
    padding: 0.15em;
    display: inline-block;
}

.text-field-control-major {
    font-size: 1.1em;
    height: 1.4em;
    width: 25em;
}

#search-box {
    vertical-align: middle; /* I hoped this would help, but it had no effect*/
}

這是一個JSFiddle： http : //jsfiddle.net/2Q86w/

Answer 1

添加垂直對齊：中間； 到.label-major和.text-field-control-major。 CSS將如下所示：

.label-section, .label-major {
    font-size: 2.5em;
    font-family: "courier new";
    display: inline-block;
    vertical-align: middle;
}

.text-field-control-major {
    font-size: 1.1em;
    height: 1.4em;
    width: 25em;
    vertical-align: middle;
}

Answer 2

嘗試這個 ;）

<div class="container">
<div class="label"></div>
<div class="textbox"></div>
</div>

.container {清除：兩者； } .label {float：left; 寬度：_} .textbox {float：left; }