对齐一个表格单元里面的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一旦离开一个居中

回答

相关问题