通过忽略绝对定位的元素使文本居中对齐

Question

我正在从头开始开发一个弹性表，该表支持过滤和排序。过滤器和排序的图标显示在表头（右上角）中。我的表格也支持用户可以将标题文本定位在左侧/中心；

我的问题：

由于图标位于表头内，因此图标也占用了一些空间。因此，当我将元素放置在中心时，我看到对齐受到干扰，如下所示。

body {
  width: 100%;
}

.table-header, .table-body {
  display:  flex;
  width: fit-content;
  border: 1px solid black;
  padding: 10px;
}

.header, .data {
  display: flex;
  min-width: 150px;
   width: 150px;
  border-right:  1px solid black;
  display: flex;
  justify-content: center;
  position: relative;
}

.header .text {
  width: 100%;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icons {
  float: right;
  right: 0;
  display: flex;
}

<div class="table">
  <div class="table-header">
  <div class="header">
  <div class="text">Hlkjklkjlkjlkj lkjlkjlkjlkjlkjljlkjlkj</div>
  <div class="icons">
    <span> &#9760</span>
    <span> &#9760</span>
  </div>
</div>
  
  <div class="header">9747
  <div class="text">Header 2</div>
  <div class="icons">
    <span>b</span>
    <span>b</span>
  </div>
</div>
  
  <div class="header">
  <div class="text">Header 3</div>
  <div class="icons">
    <span>a</span>
    <span>b</span>
  </div>
</div>
  
  <div class="header">
  <div class="text">Header 4</div>
  <div class="icons">
    <span>a</span>
    <span>b</span>
  </div>
</div>
  
</div>

  <div class="table-body">
    <div class="data">123</div>
    <div class="data">123</div>
    <div class="data">123</div>
    <div class="data">123</div>
  </div>
  <div class="table-body">
    <div class="data">123</div>
    <div class="data">123</div>
    <div class="data">123</div>
    <div class="data">123</div>
  </div><div class="table-body">
    <div class="data">123</div>
    <div class="data">123</div>
    <div class="data">123</div>
    <div class="data">123</div>
  </div>
</div>

代码：Here

我尝试了什么

因此，由于图标也占用了一些空间，为了避免这种情况，我将它们绝对相对于标题定位。这样对齐问题就解决了。但是对于必须显示省略号的长标题，省略号隐藏在图标后面，如下所示

代码：Here

那么解决这个问题的方法是什么？我想通过减少图标占用的空间来保持中心位置。可以通过 CSS 实现吗？请帮忙。谢谢:)

Answer 1

如果您尝试使用绝对定位来做到这一点，您需要知道您的图标可以采用的确切宽度。

那么可能的解决方案是在表头中添加填充规则（左/右），因此 CSS 代码应该是这样的：

body {
  width: 100%;
}

.table-header, .table-body {
  display:  flex;
  width: fit-content;
  border: 1px solid black;
  padding: 10px;
}

.header, .data {
  box-sizing: border-box; 
  padding: 0 30px;
  display: flex;
  min-width: 150px;
  width: 150px;
  border-right:  1px solid black;
  display: flex;
  justify-content: center;
  position: relative;
}

.header .text {
  width: 100%;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icons {
  position: absolute;
  right: 0;
}