如何在div中将三个表居中? [英] How can I center three tables in a div?

问题描述

我正在努力解决CSS问题.我有3张桌子，我需要它们在div中居中.我尝试过浮动，text-align:center和其他任何功能，但我无法使其正常工作.

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 cannot make it work.

这是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;
}

这是现在的样子:

推荐答案

提琴: 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>

这篇关于如何在div中将三个表居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！