当其他内容浮动时，如何将html表格单元格中的内容置于中心位置？

I have content that is centered and content that is float right and I just realized that the centered text is shifted over to the left due to the float:right content.

我的内容是居中的,内容是浮动的,我只是意识到由于float:right内容,居中文本被转移到左边。

The center text is using this css:

中心文本使用此css:

 .tableCell {
      text-align: center;
 }

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

and here is the HTML:

这是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>

Is there anyway to have content inside a table cell that is centered and the horizontal location is not affected by float:right text?

反正是否有内容的表格单元格内的内容和水平位置不受浮动:右文本?

2 个解决方案

#1

A simple way of doing it is to use absolute positioning on the arrow icon/image instead of float, as shown below.

一种简单的方法是在箭头图标/图像上使用绝对定位而不是浮点,如下所示。

The vertical placement of the arrow may take some tweaking, depends on what the rest of the design looks like.

箭头的垂直放置可能需要一些调整,取决于设计的其余部分。

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>

#2

JS Bin

Pay more attention HTML, maybe it's about typo.

更多关注HTML,也许是关于拼写错误。

<td class="tableCell id="697">

Should be

<td class="tableCell" id="697">