How to vertically center align icon inside table header

Question

I have a dynamic table, with dynamic no of column and rows... In table header, I need to fix sort icon vertically center.. Even table header text size is dynamic and no of lines keeps growing... how to vertically align sort icon while text size keeps increases?

jsfiddle

<table style="width:100%">
  <tr>
    <th><div class='filter-container header-container'> <div class='header-text'>  Firstname Firstname Firstnam eFirstnam eFirstname Firstname Firstname Firstname Firstname</div><div class='icon-right'> <span    class= "fa fa-sort-asc fa-lg sort-icon "></span><span   class= "fa fa-sort-desc fa-lg sort-icon  "></span></div></div></th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

CSS:

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th, td {
  padding: 5px;
}

.filter-container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0px !important;
  margin: 0px !important;
}

.header-container {
  height: 100%;
  vertical-align: middle;
  text-align: center;
}

.header-text {
  font-size: 22px;
  line-height: 24px;
  color: #000000;
  font-weight: normal;
  width: 90%;
  float: left;
  letter-spacing: 0;
  text-align: left;
}

.sort-icon {
  float: right !important;
  clear: right;
  height: 1px !important;
}

Answer 1

Use a wrapper of the entire table header cell contents. Inside it, use two elements. The text and the icon:

<th>
  <div class="aligner">
    <div class="text">any text here can be as long as you want</div>
    <div class="icon">your icon here</div>
  </div>
</th>

and use:

th .aligner {
  display: flex;
  align-items: center;
}

Obviously, both aligned elements need to have equal vertical padding , border and margin s.

---

Using the example you just added, here's a starter: https://jsfiddle.net/websiter/h94yen82/

I removed your styles for the sorter and added:

.header-container {
  justify-content: space-between;
}
.sort-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 0;
}

Answer 2

Quick/simply fix, add this to .icon-right :

.icon-right {
    ...
    top: calc(50% - 8px);
    position: relative;
}

Edit

Since you want to apply this to all columns, try this:

.icon-right {/* Add this new class */
    top: calc(50% - 8px);
    position: absolute;
    right: 5px;
}

th {/* Add this new class */
    position: relative;
}

.filter-container {
    ...
    /*position: relative;*/ /* remove this line */
    ...
}

Try it jsfiddle .

Answer 3

How about this?

.header-container {
  height: 100%;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
}

.icon-right {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top:-10px;
}

https://jsfiddle.net/56y4wmkz/

Answer 4

try this

 .header-container {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

Answer 5

Try These properties I think it's useful for you.

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.icon-right {
  margin-top: -15px;
}

 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } .filter-container { width: 100%; height: 100%; position: relative; padding: 0px !important; margin: 0px !important; } .header-container { height: 100%; vertical-align: middle; text-align: center; } .header-text { font-size: 22px; line-height: 24px; } .header-text { color: #000000; font-weight: normal; } .header-text { width: 90%; float: left; text-align: start; letter-spacing: 0; text-align: left; } .sort-icon { float: right !important; clear: right; height: 1px !important; } .header-container { display: flex; align-items: center; justify-content: space-between; } .icon-right { margin-top: -15px; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <table style="width:100%"> <tr> <th><div class='filter-container header-container'> <div class='header-text'> Firstname Firstname Firstnam eFirstnam eFirstname Firstname Firstname Firstname Firstname</div> <div class='icon-right'> <span class= "fa fa-sort-asc fa-lg sort-icon "></span><span class= "fa fa-sort-desc fa-lg sort-icon "></span></div></div></th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> 

this is my code pen link

https://codepen.io/arshiyakhanam_786/pen/JzyvKe

Answer 6

you can use transform to make div vertically align

.icon-right{
  top: 40%;
  transform: translateY(-40%);
  position: relative;
  line-height: 1.8em;
}

Answer 7

Almost answer set height of two icons is 0px or 1px to make two icons is nearly, so cannot click to sort. I think you should use another icon (or image) width distance to top and bottom rational (like fa-caret ). How about this?

https://jsfiddle.net/2merngco/

Answer 8

I don't know how but using absolute position worked for me!

<th>
 Title <span class="sort-icon"><i class="fa fa-sort"></i></span>
</th>

.sort-icon {
    position: absolute;
}