How can I center three tables in a div?

Question

I am struggling with a CSS problem. I have three tables and I need them to center in a div. I have tried floating, text-align:center and anything else came in mind but I just ca

Answer 1

Not sure why tables are being used. Bootstrap was mentioned, and is the right idea -- Maybe a bit of overkill, you just need a bit of the grid. Stealing some from 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>

Answer 2

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>