Html 内联元素的WebKit中的垂直对齐不正确

我有一个小的定义列表，我想在水平和垂直方向上以四列为中心。我将

html

-元素设置为

display:table

，将

body

设置为

display:table单元格与
垂直对齐：中间

看这个。如果将第27行的
字体大小更改为
4em
（或任何大于
1em
）的内容，您将看到，在Chrome上，内容跳到了错误的位置，而之前它是正确的。在IE上，字体大小无关紧要，无论哪种方式，它都保持在正确的位置

如果将
dl
设置为
display:block
，它也可以在两种浏览器上运行，但我需要在视觉上以内联方式显示它们

是我做错了什么，还是这是Chrome中的一个bug。如果是，我如何解决它？
添加

vertical-align: top;

给你的dl。在这里检查。不幸的是显示：内联；etc导致了这类问题。
你好，马里奥斯，就是这样！非常感谢您的快速响应！继续编码并享受乐趣；-）