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

我已将.mycontainer类添加到包含div的内容中。然后在文本周围添加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;
}

请参阅 Example 。

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>