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

【问题标题】：How to vertically center align icon inside table header如何在表格标题内垂直居中对齐图标
【发布时间】：2022-02-14 04:25:10
【问题描述】：

我有一个动态表，列和行数是动态的...在表头中，我需要将排序图标垂直居中固定。即使表头文本大小是动态的，行数也在不断增长...如何在文本大小不断增加的同时垂直对齐排序图标？

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

【问题讨论】：

哪个.header-text css 类实际上与您的代码相关？有什么特殊原因不能将它们合并在一起吗？
是否有不使用 flexbox 的 css table 解决方案？

标签： html css

【解决方案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 和margins。

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

我删除了您的分拣器样式并添加了：

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

【讨论】：

【解决方案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。

【讨论】：

这对我有用.. 但是为什么我们要减去 8px？你能解释一下这段代码吗
jsfiddle.net/KrishnaAnanthi/6gqn1Lxp/18 当我添加到所有列时它会中断
@user2900572 calc() 允许设置动态值。所以它基本上将顶部设置为 50%（所以它会在中间，但这意味着箭头的顶部在中间），然后是 -8px（所以将它向上推一点以完美地在中间） . -8px 是图标高度的一半。

【解决方案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/

【讨论】：

【解决方案4】：

试试这个

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

【讨论】：

添加一个js小提琴链接。
它不在中心.. 看看顶部和底部的间隙
实际上，当您检查时这些位于中心位置，您注意到跨度位于准确的中心位置，箭头位于跨度的 sudo 元素之后和之前，这就是为什么出现间隙差异的原因......我希望你能理解它...
是的，它没有垂直居中对齐

【解决方案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

【讨论】：

【解决方案6】：

你可以使用transform使div垂直对齐

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

【讨论】：

【解决方案7】：

几乎答案设置两个图标的高度是0px或1px使两个图标接近，所以不能点击排序。我认为您应该使用另一个图标（或图像）宽度距离顶部和底部有理（如fa-caret）。这个怎么样？

https://jsfiddle.net/2merngco/

【讨论】：

【解决方案8】：

我不知道如何使用绝对位置对我有用！

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

.sort-icon {
    position: absolute;
}

【讨论】：