CSS：在DIV中對齊元素

Question

我無法正確對齊div中的某些元素。

到目前為止，這就是我所擁有的。 我希望Bootstrap滑塊垂直對齊，以使幻燈片的底部與右側黃色輸入文本的底部匹配。

這是我的CSS：

.filter {
    display: inline;
    clear: both !important;
}

.filter h1 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    line-height: 20px !important;
    font-size: 18px !important;
    font-weight: normal !important;
    clear:both;
}

.filter_slider {
    width:300px !important;
    float: left !important;
    vertical-align: bottom !important;
}

.filter_text {
    background: #ffffcc !important;
    width: 80px !important;
    float: right !important;
    vertical-align: middle !important;
}

這是我的HTML：

    <div class="filter">
        <h1>Price</h1>
        <input id="filter_slider_price" class="filter_slider" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="hide">
        <input type="text" id="filter_text_price" class="filter_text" readonly>

        <script type="text/javascript">
          $('#filter_slider_price').slider().on('slide', function(ev) { $('#filter_text_price').val(ev.value); });
        </script>
    </div>

    <div class="filter">
        <h1>Volume</h1>
        <input id="filter_slider_volume" class="filter_slider" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="hide">
        <input type="text" id="filter_text_volume" class="filter_text" readonly>

        <script type="text/javascript">
          $('#filter_slider_volume').slider().on('slide', function(ev) { $('#filter_text_volume').val(ev.value); });
        </script>
    </div>

Answer 1

這是解決方案的示例： http : //jsfiddle.net/Paceaux/Dv3r3/

我假定了以下語義HTML，包括HTML5 range屬性和<ouptut>元素：

<form class="form_filter">
<fieldset class="filter">
  <label for="range1" class="filter_label">price</label>
  <input type="range" id="range1" class="filter_slider"/>
  <output class="filter_text">
    10
  </output>

我能得到類似的截圖通過使用一個理想的結果position:relative的.filter_label並在一些填充有心計.filter_text 。

因為我沒有使用!important上下文，所以將其從CSS中刪除：

.form_filter{
  width: 420px;
}
.filter {
  display: block;
}
.filter_label {
  display: block;
  margin-bottom: 0;
  margin-top: 60px;
  line-height: 20px;
  font-size: 18px;
  font-weight: normal;
}
.filter_slider {
  width:300px;
}
.filter_text {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  top:-55px;
  float:right;
  padding-top:40px;
  height: 30px;
  width: 80px;
  background: #ffffcc;
}