html – CSS表格单元格中的表格元素抵消了其他表格单元格内容

“center”div中的下表元素导致“left”div中的内容从顶部偏移几个像素(在我的浏览器中为8).在表之前添加一些文本会删除此偏移量.

为什么?如何在我的桌子前不需要“虚拟”文本行的情况下阻止这种情况发生?

<html>
<head>
    <style type="text/css">
        #left {
            display: table-cell;
            background-color: blue;
        }
        #menu {
            background-color: green;
        }
        #center {
            background-color: red;
            display: table-cell;
        }
    </style>
<body>
    <div id="left">
        <div id="menu">
            Menu 1<br>
            Menu 2<br>
        </div>
    </div>
    <div id="center">
        <table><tr><td>This is the main contents.</tr></td></table>
    </div>
    <div id="left">
        <div id="menu">
            Menu 1<br>
            Menu 2<br>
        </div>
    </div>
</body>
</html>

Update0

请注意,对于浮点数,我无法将居中的列扩展到其内容.我从中提取此示例的源使用display:table; margin-left:auto; margin-right:auto;把身体的一切都集中在一起.

最佳答案
我能够通过添加vertical-align:top来修复它;采用’#left’风格.

你应该用display:table-row包装display:table-cell divs在另一个div中

转载注明原文:html – CSS表格单元格中的表格元素抵消了其他表格单元格内容 - 代码日志