html - 表格内的对齐问题

Question

我有两个 div，我将它们放在一个表格中以便水平对齐。

<table>
   <tr>
      <td>
        <div>
           data
         </div>
         <div>
            data
         </div>
      </td>
   </tr>
</table>

如下所示：

我现在想将这两个对齐在中心，而不是左边。我试过了<td style="margin-left:auto; margin-right:auto;"> ，但没有快乐。

有什么想法吗？

Answer 1

应用margins到<table/>：

table {
    margin: 0 auto;
}

这是一个演示小提琴。

Answer 2

创建了一个小提琴示例

对 td 和 div 使用 align="center" 使用 display: inline-block;

<table style="border: 1px solid green; width: 100%; ">
<tbody><tr>
  <td align="center">
    <div style="border: 1px solid red;width: 30px;display: inline-block;">
       data
     </div>
     <div style="border: 1px solid red;width: 30px;display: inline-block;">
         data
     </div>
  </td>

Answer 3

<div id="containerdiv">
  <div id="coveringdiv">
    <div id="firstdiv">
      <div id="yourdata">
        Your Data Here
      </div>
      <div id="yourvalue">
        Value
      </div>
    </div>
    <div id="seconddiv">
      <div id="yourdata">
        Your Data Second
      </div>
      <div id="yourvalue">
       values2
      </div>
    </div>
  </div>

</div>

和 CSS：

body
{
background-color: #123456;
}


#coveringdiv
{
border: solid 1px #FFFFFF;
height: 200px;
margin: 0 auto;
width: 100%;
text-align: center;
}

#firstdiv
{
display: inline-block;
}

#yourdata
{
color: #FFFFFF;
font-size: 10px;
}

#yourvalue
{
color: #FFFFFF;
font-size: 24px;
}

#seconddiv
{
display: inline-block;
}