HTML/CSS 显示=表行对齐

Question

我在使用 <div display='table-cell'> 时无法让两个组件对齐.第一个组件显示在顶部有一个间隙。我想让它们对齐显示。

这是 JsFiddle:http://jsfiddle.net/66s7x5fr/

这是 HTML:

<div class="form-group modifierColumn">
    <div class="cell">
        <select class="form-control input-sm btn-primary">
            <option value="Broad">Broad</option>
            <option value="Moderate">Moderate</option>
            <option value="Single">Single</option>
        </select>
    </div>
    <div class="cell"> 
        <span class="input-group input-group-sm">
            <span class="input-group-btn"> 
                <button class="btn btn-primary" type="button"> <i class="fa fa-minus"></i> </button> 
            </span> 
            <input class="form-control text-justify" type="text" value="0"> </input>
            <span class="input-group-btn"> 
                <button class="btn btn-primary" type="button"> <i class="fa fa-plus"></i> </button> 
            </span>
        </span>
    </div>
</div>

这是 CSS:

.modifierColumn .cell:not(:last-child) {
    padding-right: 5px;
}
.cell {
    display: table-cell;
}

Answer 1

类似于nocarrier的响应:

.cell {
    vertical-align: top;
    display: table-cell;
}