如何在引導程序中將此fontawesome圖標垂直對齊放置在標題div的中間

Question

我在bootstrap中的可折疊組件中有一個搜索過濾器框。

標記如下：

<div class="container">
<div class="col-xs-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading panel-heading-pointer" role="tab" id="headingOne" data-toggle="collapse" href="#collapseOne" >
      <h4 class="panel-title">

      </h4>
          Search Filters<span style="padding-bottom:10px"><i class="fa fa-arrow-circle-down fa-2x floatRight"></i></span>

    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  </div>
  </div>
  </div>

輸出如下：

我希望fa-arrow-circle-down圖標在標題div的底部和頂部以相等的間距坐着 - 這樣它就像文本一樣位於標題的中間。 我試過添加邊距，跨度，填充，但似乎沒有任何東西向上移動圖標的位置！

請幫忙！

我唯一的自定義樣式是floatRight，它是：

.floatRight{
    float:right;
}

非常感謝！

Answer 1

我已經在包含div添加了一個.mycontainer類。 然后在文本和圖標周圍添加了span 。 .mycontainer有display: table; 和span display:table-cell; 。 這樣你就可以使用vertical-align:middle; 在span元素上。

HTML ：

<div class="container">
<div class="col-xs-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading panel-heading-pointer mycontainer" role="tab" id="headingOne" data-toggle="collapse" href="#collapseOne" >
      <span class="text">Search Filters</span>
      <span class="fa fa-arrow-circle-down fa-2x pull-right"></span>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
</div>
</div> 

CSS ：

.mycontainer {
  display:table;
  width:100%;
}

.mycontainer span {
  display: table-cell; 
  vertical-align: middle;
}

見例子 。

Answer 2

您可以使.panel標題位置相對：

.panel-heading (
  position: relative;
}

而不僅僅是給css中的道具后面的圖標：

position: absolute;
top: 50%;
right: 10px; //or how much you want it to be from the right
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);

這將使圖標始終垂直居中（它不依賴於圖標的尺寸）

Answer 3

我會把它作為一個跨度並調整線高

Answer 4

有點晚了，但不要添加類，只需正確使用bootstrap行，cols。 只需改變col-sm- *的大小即可。 沒有必要添加css類，因為你已經在使用bootstrap了。

<div class="container">
  <div class="row">
<div class="col-sm-12">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading panel-heading-pointer mycontainer" role="tab" id="headingOne" data-toggle="collapse" href="#collapseOne" >
      <div class="row">
      <div class="col-sm-9">
        <span class="text">Search Filters</span>
      </div>
      <div class="col-sm-3">
        <span class="fa fa-arrow-circle-down fa-2x pull-right"></div>
      </div>
      </span>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
</div>
</div> 
</div>