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

Question

I have a search filter box in a collapsable component in bootstrap.

The markup is as follows:

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

The output of this looks like: enter image description here

I would like the fa-arrow-circle-down icon to be sat in with equal spacing at the bottom and top of the header div - such that it is sat in the middle of the header - like the text. I have tried adding margins, spans, paddings, but nothing seems to shift up the position of the icon!

Please help!

The only custom style I have is the floatRight which is :

.floatRight{
    float:right;
}

Many thanks!

have you tried a negative margin-top on the``? or maybe a different line-height on the ``. — Patrick, Mar 24 '15 at 17:17
Can you please provide a jsfiddle with your html and css please — AndrewL64, Mar 24 '15 at 17:17
possible duplicate of [How to center text vertically with a large font-awesome icon?](http://stackoverflow.com/questions/17309928/how-to-center-text-vertically-with-a-large-font-awesome-icon) — Chad, Mar 24 '15 at 17:19

score 2 · Accepted Answer · answered Mar 24 '15 at 17:36

I've added a .mycontainer class to the containing div. Then added span around the text and also the icon. .mycontainer has display: table; and span has display:table-cell;. This way you can then use vertical-align:middle; on the span elements.

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;
}

See Example.

Perfect - why does vertical align not work outside of the table cell? — RenegadeAndy, Mar 24 '15 at 18:54
Don't need to add extra css classes since you are already using bootstrap. See my example below. Just need to add rows and col's to your panel header. — Corey Witherow, Jun 15 '17 at 19:34

score 1 · Answer 2 · answered Mar 24 '15 at 17:31

You can make your .panel-heading position relative:

.panel-heading (
  position: relative;
}

Than just give to the icon following props in 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%);

This will make the icon always be vertical centered (it doe not depends on icon's dimensions)

score 0 · Answer 3 · answered Mar 24 '15 at 17:32

0

I would make it a span and adjust the line height

answered Mar 24 '15 at 17:32

Web Dev

305
1
12

score 0 · Answer 4 · answered Jun 15 '17 at 19:31

A little late, but instead of adding classes, just use the bootstrap rows, cols correctly. Just change the size of the col-sm-* to whatever. No point of adding css classes since you are already using 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>

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

4 Answers4