无法在表格标题中居中文本和图像[重复]

Posted 2023-03-29

【中文标题】无法在表格标题中居中文本和图像[重复]

【英文标题】：Can't Center Text and Image in Table Heading [duplicate]

【发布时间】：2020-05-23 06:58:15

【问题描述】：

当浮动到表格中文本的右侧时，我似乎无法使图像居中。

在这里的示例中看起来很正确，所以它可能与我网站的 css 有关，但我不知道如何垂直对齐文本和图像。

这是我的屏幕截图：https://www.dropbox.com/s/alejui9bchad4r0/Screen%20Shot%202020-02-06%20at%2011.37.28%20PM.png?dl=0

#sortedTable table 
  border-spacing: 0;
  width: 100%;


#sortedTable th 
  cursor: pointer;
  color: #fff;
  background-color: #1b1b1b;
  border: 0;


#sortedTable th, #sortedTable td 
  text-align: left;
  padding: 16px;


#sortedTable img
    float: right;
    vertical-align: middle;

<table id="sortedTable" class="table-full-width">
  <tr> 
    <th onclick="sortTable(0)">Item 1 <img src="https://cigardojo.com/wp-content/uploads/2020/02/up-down-arrows.png"    class="alignnone wp-image-52355" /></th>
    <th onclick="sortTable(1)">Item 2</th>
    <th onclick="sortTable(2)">Item 3</th>
  </tr>
  <tr><td>bla bla bla bla</td></tr>
</table>

【问题讨论】：

截图需要Dropbox用户。请参阅这篇文章，它可以帮助您将您的图像公开为meta.stackexchange.com/questions/106053/…

【参考方案1】：

我无法具体帮助您使用浮动方法，但我可以向您展示一个有效的 flexbox 替代方案。这是创建布局和对齐方式的最新方法之一：

#sortedTable table 
  border-spacing: 0;
  width: 100%;


#sortedTable th 
  cursor: pointer;
  color: #fff;
  background-color: #1b1b1b;
  border: 0;


#sortedTable th, #sortedTable td 
  min-width: 100px;
  padding: 16px;
  text-align: left;


#sortedTable .cellContent 
  display: flex;
  align-items: center;
  justify-content: space-between;
 

<table id="sortedTable" class="table-full-width">
  <tr> 
    <th onclick="sortTable(0)">
      <div class="cellContent">
        Item 1
        <img src="https://cigardojo.com/wp-content/uploads/2020/02/up-down-arrows.png"    class="alignnone wp-image-52355" />
      </div>
    </th>
    <th onclick="sortTable(1)">Item 2</th>
    <th onclick="sortTable(2)">Item 3</th>
  </tr>
  <tr><td>bla bla bla bla</td></tr>
</table>

【讨论】：

箭头向右浮动，但对我来说它们仍然与单元格的顶部对齐。

那么，当你运行我的代码 sn-p 时，它们是否居中对齐？