Alignment issues inside table - html

Question

I have two divs which I put inside a table in order to get horizontally alignment.
<table>
<tr>
<td>
<div>
data
</div>
<div>
data
</div>
</td>
</tr>
</table>
Which looks like the following:
I now want to align these 2 in the centre, as opposed to the left.
I have tried <td style="margin-left:auto; margin-right:auto;">
but no joy.
Any idea?`

Answer 1

Apply the margins to the <table/>:
table {
margin: 0 auto;
}
Here is a demo fiddle.

Answer 2

Created a fiddle example
use align="center" for td and for div use 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>
and 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;
}