我怎样才能将这个 fontawesome 图标垂直对齐在 header div in bootstrap 的中间

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 图标在 header div 的底部和顶部等间距放置 - 这样它就位于 fa-arrow-circle-down 的中间header - 喜欢正文。我已经尝试添加边距、跨度、填充，但似乎没有任何东西可以移动图标的位置！

请帮忙！

我唯一的自定义样式是 floatRight，它是：

.floatRight{
    float:right;
}

非常感谢！

Answer 1

您可以使您的 .panel-heading 位置相对：

.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 2

我会把它变成一个跨度并调整行高

Answer 3

我在 div 中添加了 .mycontainer class。然后在文本和图标周围添加 span 。 .mycontainer 有 display: table; 而 span 有 display:table-cell;。这样您就可以在 span 元素上使用 vertical-align:middle;。

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 4

有点晚了，但不是添加类，而是正确使用 bootstrap 行和列。只需将 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>

我怎样才能将这个 fontawesome 图标垂直对齐在 header div in bootstrap 的中间

How can I position this fontawesome icon vertically aligned in the middle of the header div in bootstrap

jquery

html

css

twitter-bootstrap

font-awesome