如何垂直对齐标签和文本字段？

Question

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

注意文本字段与标签的对比方式 NOT ALIGNED 。我该如何解决这个问题。

这是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

添加vertical-align：middle;到.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 {clear：both; } .label {float：left; width：_} .textbox {float：left; }