将div对齐在一个表格单元格内，左侧对齐一个，中心对齐其他。

Question

我试图做一些看起来很简单的事情。在一个表格中，我有一列文本，它的值从1到18。我希望包含文本的单元格居中对齐。然而，有时候，同一单元格需要显示一个星号（*）。当星号被显示时，它应该左对齐在同一单元格中，同时保持数字的完美对齐。

我无法完全正确地对齐它。

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

- pixelwiz

---

为什么不能将星号移动到单独的td中？ - Vadim Ovchinnikov

@VadimOvchinnikov 因为那样就会有另一整列有边框了。 - Don

@Don，你可以使用CSS去掉这个td的边框，并为所有其他的td应用边框。 - Vadim Ovchinnikov

@VadimOvchinnikov 那么数字在表格中仍然不会居中。它们将沿着行向下移动。是的，你可以继续使用hack方法让它工作，但那样会适得其反。 - Don

我不想要额外的单元格，是因为即使不需要它，它也会占用空间。星号只有在某些情况下才会出现。在同一个单元格中放置星号是可行的，但我无法完全弄清楚父子对齐部分。 - pixelwiz

Answer 1

只需将星号的

添加position: absolute属性，您的数字将始终正确居中：

<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 中一样。

也许我的解释有些简略并且不完全正确，但应该可以让您基本理解。要获取更多信息，请查看本网站或其他地方的“position: absolute”区域：https://www.w3schools.com/css/css_positioning.asp。

- P.S.

---

@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/ - P.S.