垂直对齐没有将我的字段带到 DIV 的顶部答案

【问题标题】：vertical-align isn't bringing my fields to the top of the DIV垂直对齐没有将我的字段带到 DIV 的顶部
【发布时间】：2016-12-29 12:28:33
【问题描述】：

我正在尝试对齐搜索字段。我所有的元素都在一个父容器中，该容器具有样式

#statSearchFields {
    vertical-align: top;
    font-size: 90%;
}

元素本身的样子

<div class="searchField">
Start Date<br>
<input type="text" name="start_date" id="start_date" value="06/28/2014" placeholder="Start Date" class="datepicker hasDatepicker">
</div>

但是当我将它们放入容器中时，它们会显得偏离中心。这是小提琴的例子——https://jsfiddle.net/n73ao02h/1/。如何使所有内容对齐？

【问题讨论】：

标签： html css alignment vertical-alignment

【解决方案1】：

您必须将vertical-align: top; 添加到.searchField 选择器。

更新 jsfiddle：https://jsfiddle.net/n73ao02h/2/

【讨论】：

【解决方案2】：

vertical-align: top 不是从您的 ID 继承的。将以下内容添加到您的 CSS 中，您将获得预期的结果。

.searchField {
  display: inline-block;
  vertical-align:top;
}

注意：您应该从您的#statSearchFields ID 中删除vertical-align 属性。

【讨论】：