對齊一個表格單元裏面的div一旦離開一個居中

我正在嘗試做一些應該相當簡單的事情。我在表格中有一列中的值爲1到18的文本。我希望具有文本的單元格對齊中心。但是，有時候，同一個單元需要顯示星號（*）。當星號顯示時，它應該左對齊在同一個單元格中，同時保持數字本身完全對齊。對齊一個表格單元裏面的div一旦離開一個居中

我不能完全得到它對準正確的方式

<table border=1> 
 
    <tr> 
 
    <td style="text-align:center" width=50> 
 
     <div> 
 
     <div style="float:left;">*</div> 
 
     <div>14</div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center> 
 
     <div></div> 
 
     <div>16</div> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2017-08-08 pixelwiz

爲什麼你不能移動星號分開'td'？ –

@VadimOvchinnikov因爲那麼會有一個完整的其他列接壤。 – Don

@您可以刪除此「td」的邊框，並使用CSS爲所有其他「td」應用邊框。 –

只要給position: absolute到div用星號，你的號碼將被適當地始終圍繞：

<table border=1> 
 
    <tr> 
 
    <td style="text-align:center" width=50> 
 
     <div> 
 
     <div style="position: absolute;">*</div> 
 
     <div>14</div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td align=center> 
 
     <div></div> 
 
     <div>16</div> 
 
    </td> 
 
    </tr> 
 
</table>

在這種情況下position: absolute告訴：「不要考慮絕對定位的div的尺寸」。如果您將檢查div與數量，你會看到，它需要的父元素的整個寬度和高度，像div用星號是不是在DOM。

可能是我的解釋是有點差，而不是100％正確，但它應該給你的基本認識。欲瞭解更多信息通過「位置：絕對」看看區域本網站或其它地方：https://www.w3schools.com/css/css_positioning.asp

來源

2017-08-08 18:20:06

@ commercial_suicide，這真棒。一個更復雜的問題。如果我也想這樣做一些文字在右邊的數字像添加CP有時，我不能完全相同。我嘗試了在另一個div上執行position absolute和right：0，但它將它放在表格之外。 https://jsfiddle.net/pixelwiz/h5qz0njo/1/ – pixelwiz

@pixelwiz，你需要爲父'div'設置'position：relative'，絕對定位的子將相對於父親定位。這裏是工作jsfiddle：https：//jsfiddle.net/h5qz0njo/2/ –

對齊一個表格單元裏面的div一旦離開一個居中

回答

相關問題