bootstrap multiple floated divs垂直居中

Question

我有一个自举面板，在它的标题中我有一个标题，它应该向左移动，一个选择以及一个日期范围输入应该位于面板右侧，在中间垂直对齐。这是我到目前为止设法做的，问题是没有垂直对齐的选择项。

这是我的小提琴代码https://jsfiddle.net/prxbl/5ca3xo0b/8/

HTML

    <div class="panel panel-default">
      <div class="panel-heading" id="comenzi-chart">
        Heading
        <div class="input-daterange input-group" id="datepicker">
          <input type="text" class="input-sm form-control" name="start" />
          <span class="input-group-addon">to</span>
          <input type="text" class="input-sm form-control" name="end" />
        </div>
        <div class="select-chart-type">
          <select class="form-control">
            <option>Daily</option>
            <option>Weekly</option>
            <option>Monthly</option>
          </select>
        </div>
      </div>
  </div>

CSS

.input-daterange {
    width: 250px;
    bottom: 5px;  
    float: right;
}

.select-chart-type {
    padding-right: 10px;
    float: right;
}

.select-chart-type select {
    padding: 5px 10px;
    height: 30px;
}

我可能在这里采取了错误的方法，所以请随意提出正确的方法来做到这一点。最后，我希望能够在此面板标题中插入按钮/选择/输入/它们应该全部相互跟随，向右浮动并在中间垂直对齐。

谢谢！

Answer 1

在margin-top: -5px;此课程上使用.select-chart-type ..

<强> OR

在position: relative;bottom: 5px;此课程上使用.select-chart-type ..

Answer 2

您可以像右input一样使用position: relative;和bottom : 5px

.select-chart-type {
    padding-right: 10px;
    float: right;
    position: relative;
    bottom: 5px; 
}

Fiddle

Answer 3

在此课程中添加此css＆＃34; .select-chart-type＆＃34;

.select-chart-type {
  bottom: 5px;
  float: right;
  padding-right: 10px;
  position: relative;
}

请参阅UPDETED DEMO