Question

我的问题是我想让左边的2个表居中，因为右边的第3个表会增加（网格视图）。我希望他们集中。我怎么能这样做？

Answer 1

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

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

您可以将文本添加到任何表格单元格中，它将始终重新调整大小并使其居中。

Answer 2

您好，您只需添加父div的宽度

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

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

居中并且与动态表的大小左对齐的表格

2 个答案: