2

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

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

如下所示:

在此处输入图像描述

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

有什么想法吗?

4

3 回答 3

1

应用margins<table/>

table {
    margin: 0 auto;
}

这是一个演示小提琴

于 2013-04-17T14:49:51.530 回答
0

创建了一个小提琴示例

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

于 2013-04-17T15:07:12.600 回答
0
<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;
}
于 2013-04-17T15:24:18.100 回答