Как я могу центрировать три таблицы в div?

Question

Я борюсь с проблемой CSS. У меня три таблицы, и мне нужно, чтобы они сосредоточились в div. Я попробовал плавать, text-align: center и что-то еще, но я просто не могу заставить его работать.

Вот 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

Fiddle: 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:

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>