对齐div在一个表格单元格中，一旦左对齐

I'm trying to do something that should be fairly simple. I have a column of text in a table that has values from 1 to 18. I want the cell that has the text to align center. However, sometimes, the same cell needs to display an asterisk (*). When the asterisk is displayed, it should be aligned left in the same cell, while keeping the numbers themselves perfectly aligned.

我想做一些应该很简单的事情。表中有一列文本，值从1到18。我想要有文本对齐中心的单元格。然而，有时同一个单元格需要显示一个星号(*)。当星号显示时，它应该在同一个单元格中左对齐，同时保持数字本身的完全对齐。

I can't quite get it to align the right way

我不能让它以正确的方式对齐

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

1 个解决方案

#1

Just give position: absolute to the div with asterisk, and your numbers will be always centered properly:

只需给出位置:绝对的带星号的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>

In this case position: absolute tells: "Don't consider absolutely positioned div's dimensions". If you will inspect the div with number, you will see, that it takes the full width and height of parent element, like the div with asterisk is not in DOM.

在这种情况下，位置:绝对告诉:“不要考虑绝对定位的div的尺寸”。如果您将用number检查div，您将看到，它采用父元素的全宽度和高度，就像带有星号的div不在DOM中一样。

May be my explanation is a little poor and not 100% correctly, but it should give you the basic understanding. For more info look through "position: absolute" area in this site or somewhere else: https://www.w3schools.com/css/css_positioning.asp

也许我的解释是有点差，不是100%正确，但它应该给你基本的理解。要了解更多信息，请查看该站点或其他地方的“位置:绝对”区域:https://www.w3schools.com/css/css_position.asp