html - 无法将文本放到 div 的中间

Question

最近我一直在尝试习惯 float div 并将它们对齐以适合所有行。但是，我有一个小问题。在我创建的其中一个代码中，我注意到我根本无法将这段文字写下来。

这是我的代码:

https://jsfiddle.net/9sjyj0hy/

如你所见，vs代码在这里:

<div class="fluidbox">vs.

并且 div 的末尾在所有其他 div 之后。我尝试解决此问题的第一种方法是添加行高，但这只会让事情变得更糟:

https://jsfiddle.net/9sjyj0hy/3/

如您所见，我将流体框编辑为 100 像素的行高，当我只需要 VS 文本时，结果使所有 div 都下拉。有什么办法可以解决这个问题吗？

Answer 1

将文本“vs”包裹在元素内并定位该元素。

<span class="vs">vs.</span>

.vs {
    position : absolute;
    margin-top : 40px;
}