将文本中心与表头对齐，右对齐兄弟（html - table）？

Question

我经常在我的项目中遇到这种类型的设计。我想要一个单元格文本与标题的中心对齐，并且右对齐到下面和上面的数据，如下所示。桌子有边框。图像中显示的三个单元格位于不同的行中。我怎么能这样做？

我尝试使用text-align:center，但它将所有内容与中心对齐。尝试padding但似乎没有任何作用。我尝试text-align: right，但它没有与标题对齐。

Answer 1

    <div style="text-align: center;">This is my header</div>
        <div style="text-align: center;">
		    <div style="display: inline-block; text-align: right;">
			    <div class="inner_container">0</div>
			    <div class="inner_container">123444</div>
		    </div>
    </div>

您可以尝试这样的事情：

<div style="text-align: center;">This is my header</div>
    <div style="text-align: center;">
        <div style="display: inline-block; text-align: right;">
            <div class="inner_container">0</div>
            <div class="inner_container">123444</div>
        </div>
</div>

Answer 2

如您所见，您可以使用parent table和child table来实现此目标，如下所示。使用margin将子表格与父级中心对齐，并根据需要对齐first and second child的内容。

＆＃13;

＆＃13;

div {
  width: 200px;
  border: 2px solid;
}

#parent {
  width: 100%;
}

#child {
  margin: 0 auto;
}

#child tr:nth-child(1) {
  text-align: right;
}

#child tr:nth-child(2) {
  text-align: center;
}

＆＃13;

<div>
  <table id="parent">
    <tr>
      <th>Header content</th>
    </tr>
    <tr width="100%">
      <table id="child">
        <tr>
          <td>0</td>
        </tr>
        <tr>
          <td>123344</td>
        </tr>
      </table>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;