当使用伪元素和内联块垂直居中两个元素时，应该换行的文本会破坏布局

Question

我正在使用 Chris Coyier 的方法将具有未知高度/宽度的元素垂直居中在另一个高度和宽度未知的 div 中，可在此处找到 (http://css-tricks.com/centering-in-the-unknown/)。

我用的是添加伪鬼元素的方法，效果很好。事实上，我过去曾多次使用它，没有任何问题。这次我的问题是居中的容器 div 里面有一个 h2 。如果 h2 中的文本比父 div 宽，而不是像它应该的那样换行，它会将整个 div 踢到它之前居中的 div 下方。然后它会继续正常换行。我一生都无法将文本换行。这只是其中一个全屏框的问题，但实际站点是响应式的，因此当按比例缩小时，大多数框将包含需要换行的文本。

我知道目前的代码几乎完全没有语义。我稍后会解决这个问题，但现在我只是想让它工作。如果我解释得不够好，请告诉我。在提供的示例中，有问题的框是顶行的第三个框。将鼠标悬停在方框上以查看预期和损坏的行为。对此的任何帮助将不胜感激。下面是代码笔的链接。提前致谢！

http://codepen.io/joshmath/pen/EtCKF

Answer 1

这与下面代码中的margin-right: -0.25em; 属性有关。

.hoover-box span:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}

如果您将其设置为 0.5em，它会起作用，但如果没有深入了解未知 tut 中的整个居中是如何工作的，我无法真正告诉您将其设置为一个整体。