html – 将一个表格单元格中的div对齐一次

我正在尝试做一些应该相当简单的事情.我在表中有一列文本,其值为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>
最佳答案
只需给出位置:绝对带星号的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%正确,但它应该给你基本的理解.有关详细信息,请查看本网站或其他地方的“position:absolute”区域:https://www.w3schools.com/css/css_positioning.asp

转载注明原文:html – 将一个表格单元格中的div对齐一次 - 代码日志