如何在引导程序中将此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>