Question

你可能认为它是重复的，但我不这么认为，因为我说的是桌子而不是图像！

我尝试使用以下代码在div的中心水平和垂直设置一个表格。代码适用于图像但是当我放一张桌子而不是图像时，似乎看不到表格，然后将跨度大小设置为100％，而div下面的表格显示不在div的中心。

代码：

<style>
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width:155px;
    height: 160px;
    background-color:#999;
    display: block;
}
.wraptocenter * {
    vertical-align: middle;
}

.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}

</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->
<div class="wraptocenter">
    <span></span>
    <table border="1" width=" 70%">
        <tr height="10px">
            <td width="10px" height="10px"></td>
            <td width="10px" height="10px"></td>
        </tr>
        <tr height="10px">
            <td height="10px"></td>
            <td height="10px"></td>
        </tr>
    </table>
</div>

如果你把图像放在每件东西上都可以正常工作，但对于桌子不行！

Answer 1

请参阅http://jsfiddle.net/FW2Af/

您的代码仅使用display:inline-block作为中心元素，例如图像。但是表格有display:table。

然后，您可以解决此问题，创建一个div display:inline-block，其中包含您的表格。

如果你想让桌子的宽度达到包裹中心宽度的70％：

将width:100%设置为表格
将width:70%设置为容器div。

此外，您在顶部单元格上有width="10px"。如果表的宽度为70％，那就是废话。

修改

我已经修复了IE 7（以及之前的版本），因为如果你将display:inline-block设置为一个块的元素，它会继续成为一个块，所以你必须设置diplay:inline才能将其设为display:inline-block：



此外，某些浏览器会显示<span>和<div>之间的空白区域，因此表格不会完全居中。

解决方案是：

.wraptocenter { font-size:0; } .wraptocenter>div{ font-size:16px; /* Or whatever you want */ }

（字体：https://stackoverflow.com/a/8902198/1529630，这是一个好主意，因为在这种情况下使用浮动会破坏居中）

请在此处查看：http://jsfiddle.net/FW2Af/2/

编辑3：

你说在IE 8上没有显示任何内容。对我来说它有效但不是黑色边框，它是白色的。修复了这里：http://jsfiddle.net/FW2Af/3/

.wraptocenter td{ border:1px solid black; }

在div中垂直和水平地对中表

1 个答案: