如何在表格标题内垂直居中对齐图标

Question

我有一个动态表，具有动态的列和行数...在表标题中，我需要修复排序图标垂直居中...即使表标题文本大小是动态的，并且行数不断增长...如何垂直对齐排序图标而文本大小不断增加？

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

使用整个表头单元格内容的包装。在其内部，使用两个元素。文字和图标：

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

并使用：

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

显然，两个对齐的元素需要具有相同的verticalpadding和s。bordermargin

使用您刚刚添加的示例，这是一个初学者：https ://jsfiddle.net/websiter/h94yen82/

我删除了排序器的样式并添加了：

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