我的內容是居中的，內容是浮動的，我剛剛意識到由於float：right內容，居中的文本會向左移動。如何在HTML表格單元格中有一些內容是正確的時候將內容放在中間？

中心文本使用這個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影響：正確的文字？

來源

2014-10-11 leora

我根據您的意見我的回答更新，請查看當你有一個機會，謝謝。 – 2014-10-13 18:59:23

這樣做的一個簡單方法是在箭頭圖標/圖像上使用絕對定位，而不是浮點型的，如下所示。

箭頭的垂直位置可能需要一些調整，具體取決於設計的其餘。

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>

來源

2014-10-11 02:24:46

感謝馬克 - 這工作但創造了另一個問題。我當前的css僅在您將鼠標懸停在表格單元格上時才顯示圖片。當我提出您所建議的更改時，當您將鼠標懸停在單元格上時，圖像不再顯示。我更新了CSS來突出問題..你有任何suggestiosn？ – leora 2014-10-11 04:20:17

嗨Leora：問題很簡單，你需要改變正確元素的不透明度，'.floatRight'而不是'img'，因爲'img'是'.floatRight'的子元素，現在很好用。 – 2014-10-11 10:57:00

JS Bin

更加註重HTML，也許它是關於錯字。

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

應該

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

來源

2014-10-11 04:28:36

如何在HTML表格單元格中有一些內容是正確的時候將內容放在中間？

回答

JS Bin

相關問題