如何将div中的三个表居中？

Question

我正在努力解决CSS问题。我有三张桌子，我需要它们以div为中心。我试过浮动，文本对齐：中心和其他任何想法，但我不能让它工作。

这是HTML代码：

<div style="margin:0 auto;width:91%;">
[one_third]
<table>
<tr>
<td><img height="35" width="32" src="http://alimos.topgreekgyms.gr/wp-content/uploads/2013/12/clock.png"/></td>
</tr>
<tr>
<td style="text-align:center;">55'</td> 
</tr>
</table>
[/one_third]

[one_third]
<table>
<tr>
<td><img height="35" width="32" src="http://alimos.topgreekgyms.gr/wp-content/uploads/2013/12/stats.png"/></td>
</tr>
<tr>
<td style="text-align:center;">4-5</td> 
</tr>
</table>
[/one_third]

[one_third_last]
<table>
<tr>
<td><img height="35" width="32" src="http://alimos.topgreekgyms.gr/wp-content/uploads/2013/12/zigaria2.png"/></td>
</tr>
<tr>
<td style="text-align:center;">500</td> 
</tr>
</table>
[/one_third_last]
</div>

这是CSS：

.one_third {
position: relative;
margin-right: 4%;
float: left;
min-height: 1px;
margin-bottom: 0;
width: 30.66%;
}

.last {
margin-right: 0!important;
clear: right;
}

这就是现在的样子：

Answer 1

小提琴：http://jsfiddle.net/ZssZw/

<div style="margin:0 auto;width:91%;">

 <table>
    <tr>
       <td><img height="35" width="32" src="http://alimos.topgreekgyms.gr/wp-content/uploads/2013/12/clock.png"/></td>
       <td><img height="35" width="32" src="http://alimos.topgreekgyms.gr/wp-content/uploads/2013/12/stats.png"/></td>
       <td><img height="35" width="32" src="http://alimos.topgreekgyms.gr/wp-content/uploads/2013/12/zigaria2.png"/></td>
    </tr>
     <tr>
         <td style="text-align:center;">55'</td> 

       <td style="text-align:center;">4-5</td> 
       <td style="text-align:center;">500</td> 
     </tr>


     </table>

   </div>

Answer 2

不确定为何使用表格。提到了Bootstrap，这是正确的想法 - 也许有点矫枉过正，你只需要一点网格。从Bootstrap窃取一些：

http://jsfiddle.net/U9Reg/

<style>
        div {
        display: block;
        }
        p {
        text-align: center;
        }
        .row {
margin-left: -15px;
margin-right: -15px
}

.col-md-4 {
   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   width: 30%;
   float: left;
}

.centerPix {
margin: 0 auto;
display: block;
height: 65px;
width: 65px;
}</style>

<div class="row">
<div class="col-md-4">
<img class="centerPix" src="http://alimos.topgreekgyms.gr/wp-content/uploads/2013/12/clock.png"/><p>Here is some text.</div>
<div class="col-md-4">
<img class="centerPix" src="http://alimos.topgreekgyms.gr/wp-content/uploads/2013/12/stats.png"/>
<p>Here is some text</p></div>
<div class="col-md-4">
<img class="centerPix" src="http://alimos.topgreekgyms.gr/wp-content/uploads/2013/12/zigaria2.png"/>
<p>Here is some text.</p></div>
</div>