當其他內容浮動時，如何將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>

反正有沒有內容的表格單元格內的內容和水平位置不受浮動：右文本？

Answer 1

一種簡單的方法是在箭頭圖標/圖像上使用絕對定位而不是浮動，如下所示。

箭頭的垂直放置可能需要一些調整，取決於設計的其余部分。

 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> 

Answer 2

JS Bin

更多關注HTML ，也許是關於拼寫錯誤。

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

應該

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