html - 当有一些其他内容 float 时，如何让 html 表格单元格中的内容居中？

Question

我有居中的内容和向右浮动的内容，我刚刚意识到由于 float:right 内容，居中的文本移到了左边。

中心文本使用此 css:

 .tableCell {
      text-align: center;
 }

 .floatRight img
 {
    float:right;
    cursor: pointer;
 }

这是 HTML:

   <td class="tableCell" id="697">
      <span class="floatRight">
           <img src="/arrow.png">
      </span>
      <b>1006</b><hr>Some Text<br>Some other text
   </td>

无论如何，表格单元格中的内容是否居中且水平位置不受 float:right 文本的影响？

Answer 1

一个简单的方法是在箭头图标/图像上使用绝对定位 float ，如下所示。

箭头的垂直位置可能需要一些调整，取决于其余部分 的设计看起来像。

table {
  border: 1px dotted blue;
}
.tableCell {
  text-align: center;
  position: relative;
}

.tableCell:hover > .floatRight 
{
    opacity:1;
}

.floatRight {
  position: absolute;
  top: 0;
  right: 0;
  opacity:0;
  transition: opacity ease-in-out 1s;
}

<table>
  <tr>
    <td class="tableCell">
      <span class="floatRight">
           <img src="http://placehold.it/20x20">
      </span>
      <b>1006</b>
      <hr>Some Text
      <br>Some other text
    </td>
  </tr>
</table>