twitter-bootstrap - 在选择下拉列表旁边垂直对齐文本（带引导程序）

Question

我无法让一些文本垂直居中对齐。我有一个左对齐的 H4，我在 Select 下拉列表旁边有一个右对齐的 H4，都在同一行。右侧部分工作正常（H4 在选择下拉列表旁边居中对齐），但左侧部分不是。

这是我的代码，然后是我目前拥有的图像。

<div class="clearfix">
  <span class="d-flex align-items-center" style="float: left;">
    <h4 class="custom-header" style="float: left;">Standings</h4>
  </span>
  <span class="d-flex align-items-center" style="float: right;">
    <span style="float: left; height: 100%;">
      <h4 class="custom-header">Year:&nbsp;</h4>
    </span>
    <span style="float: right;">
      <!-- Allow user to change season -->
      <select class="form-control" id="seasonSelect" onchange="location = this.options[this.selectedIndex].value;">
        @foreach($seasons as $seasonRow)
          @if($seasonRow->id == $season->id)
            <option value="/sports/{{ $sport->url_name }}/{{ $seasonRow->name }}/" selected>{{ $seasonRow->name }}</option>
          @else
            <option value="/sports/{{ $sport->url_name }}/{{ $seasonRow->name }}/">{{ $seasonRow->name }}</option>
          @endif
        @endforeach
      </select>
    </span>
  </span>
</div>

截屏：

我能够成功地将“年份：”与“选择”下拉菜单对齐，但同样的方法似乎无法让“排名”也垂直对齐。它的左浮动 DIV 不想表现。

标签： twitter-bootstrapdrop-down-menualignment