css - 在 div 中垂直和水平居中表格

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 为中心元素，例如图像。但是一张 table 有 display:table .

然后，您可以通过创建 div 来解决它与 display:inline-block其中包含您的表格。

如果您希望表格的宽度为 wraptocenter 宽度的 70%:

• 设置width:100%到 table 上
• 设置width:70%到容器 div .

此外，你有width="10px"在顶部单元格上。如果表格的宽度为 70%，那是无稽之谈。

编辑:

我已经修复了 IE 7(及之前)，因为如果你设置 display:inline-block对于一个 block 元素，它继续是一个 block ，所以你必须设置 diplay:inline为了让它成为display:inline-block :

<!--[if lt IE 8]><style>
.wraptocenter>div{
    display:inline;
}
</style><![endif]-->

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

解决方法是:

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

(字体:https://stackoverflow.com/a/8902198/1529630，这是个好主意，因为在这种情况下使用 float 会破坏居中)

在这里查看:http://jsfiddle.net/FW2Af/2/

编辑 3:

您说在 IE 8 上没有显示任何内容。对我来说它有效，但不是黑色边框，而是白色。固定在这里:http://jsfiddle.net/FW2Af/3/

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