html - 居中与动态表大小相邻且左对齐的表

Question

这是一个例子 - http://jsfiddle.net/Xb4gV/

我的问题是我想让左边的 2 张桌子居中，因为右边的第 3 张桌子会增加尺寸（网格视图）。我希望他们居中。我怎样才能做到这一点？

Answer 1

嗨，您只需像这样添加父 div 的宽度

#wrapper{
 vertical-align:top;
 margin: 0 auto;
overflow:hidden;
width:200px;
border:solid 10px red;    
}

现场演示在这里http://jsfiddle.net/Xb4gV/57/

Answer 2

不完全确定您要完成什么，但您可以尝试一下。离开你所说的你希望所有表格左对齐并在页面中间居中但你希望第三个表格能够在没有大小限制的情况下进行修改，对吗？如果是这样，这将起作用：

HTML：

<div class="wrapper">
<div class="center">
<table id="t1">
    <tr>
        <td>
            text
        </td>
    </tr>        
</table>
<table id="t2">
    <tr>
        <td>
            text
        </td>
    </tr>       
</table>
<table id="t3">
    <tr>
        <td>
            text</br>
            text</br>
            text</br>
            Resizable and centered
        </td>
    </tr>       
</table>

CSS：

.wrapper{
clear: left;
float: left;
left: 50%;
margin: 0;
padding: 0;
position: relative;
text-align: left;
 }
.center{
float: left;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#t1{
border: 1px solid black;
float:left;
}

#t2{
border: 1px solid black;
float:left;
}

#t3{
border: 1px solid black;
float:left;
}

您可以将文本添加到任何表格单元格，它总是会重新调整大小和居中。