表格中的对齐问题

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

这是demo fiddle。

Answer 2

创建了一个小提琴example

对td使用align =“center”，对div使用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;
}