如何垂直居中對齊表格內的圖標 header

Question

我有一個動態表，列和行的動態編號......在表 header 中，我需要修復排序圖標垂直居中......即使表 header 文本大小是動態的並且行數不斷增長......如何垂直對齊在文本大小不斷增加的同時排序圖標？

小提琴手

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

顯然，兩個對齊的元素都需要具有相等的垂直padding ， border和margin 。

---

使用您剛剛添加的示例，這是一個啟動器： https ： //jsfiddle.net/websiter/h94yen82/

我刪除了分揀機的樣式並添加了：

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

Answer 2

快速/簡單修復，將其添加到.icon-right ：

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

編輯

由於您要將其應用於所有列，請嘗試以下操作：

.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 */
    ...
}

試試jsfiddle 。

Answer 3

這個怎么樣？

.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

試試這個

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

Answer 5

試試這些屬性我覺得它對你有用。

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

這是我的代碼筆鏈接

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

Answer 6

你可以使用transform來使div垂直對齊

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

Answer 7

幾乎答案設置兩個圖標的高度是0px或1px使兩個圖標差不多，所以無法點擊排序。 我認為你應該使用另一個圖標（或圖像）寬度距離到頂部和底部理性（如fa-caret ）。 這個怎么樣？

https://jsfiddle.net/2merngco/

Answer 8

我不知道如何使用絕對 position 對我有用！

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

.sort-icon {
    position: absolute;
}