CODEWITHSUNDEEP
htmlcss
mtpultz
mtpultz

Reputation: 18268

How to Vertically Center Sorting Icons in a Table Header of Unknown Height Only Using CSS

Can't seem to figure out a way to vertically center sorting icons in the <th> of a table in an AngularJS application. I've added a fiddle with each of the variations the table header might take, which includes columns unsorted, ascending sorted, and descending sorted, as well as the issue when some of the th text wraps, and some doesn't. This is an exact replica of the markup and classes I have available, and in the application it all works except for the vertical position of the icons.

I've tried a few tricks that have worked in the past like using transform, but can't get it to work.

https://jsfiddle.net/ox2hahtn/1/

Upvotes: 0

Views: 701

Answers (4)

Shaggy
Shaggy

Reputation: 6796

You just need to use the translatey CSS transform function to shift the pseudo-elements up by half their height. See the updated fiddle here for a working example.

Upvotes: 0

S.Serpooshan
S.Serpooshan

Reputation: 7440

you can use a negative margin-top for sort icons, and as you used font-size: 0.8rem; for icons, you can add margin-top: -.6rem; in addition to that top:50% to make it vertically center as in this fiddle:

https://jsfiddle.net/ox2hahtn/4/

Upvotes: 1

Booster
Booster

Reputation: 434

I updated your fiddle, 

th {
      position: relative;
      padding-right: 12px; // Some space for sorting icons to be placed without overlapping header
      border: 1px solid grey; // Border to show space that arrows are being centered
       white-space: nowrap;
      &.sortable {
        cursor: pointer;
        &:before,
        &:after {
          position: absolute;
          right: 2px;
          font-family: FontAwesome;
          font-size: 0.8rem;
          opacity: 0.4;
          display: inline-block;
          height: 100%; 
          vertical-align: middle;

        }
      }
    }

Upvotes: 0

Haitham Alathamneh
Haitham Alathamneh

Reputation: 139

just add negative margin with the half of icon height.

your icons height is 19px so put margin-top: -9.5px

your &.after , &.before will become :

&:before,
&:after {
  position: absolute;
  top: 50%;
  right: 2px;
  font-family: FontAwesome;
  font-size: 0.8rem;
  opacity: 0.4;

  margin-top:-9.5px
}

Upvotes: 1

Related Questions