Question

内联元素很棒，因为它们的宽度是内容的宽度，因为它可以将它们放在CSS的规则中：

text-align: center

但是内联元素保持在同一条线上。是否可以垂直对齐它们？

请不要：

提前致谢！

Answer 1

在您的标记中，如果跨度位于不同的行上，您可以在父容器上添加：

white-space: pre-line;

使用此CSS声明，您的范围仍然居中，并且您不必添加HTML标记。

<强>预线 - 此值将导致空格序列折叠为单个空格字符。换行将在任何地方发生必须填写行框，并在标记的新行（或在在生成的内容中出现“\ a”）。换句话说，它就像正常，但它会尊重明确的换行符。

您可以在此处找到有关空白区域的更多信息：

对于IE7兼容性，您还可以在父容器上添加：

*white-space: pre /*FixIE7*/;

Answer 2

如果要将其显示在另一个上方，则需要一些保持块来保持跨度。这是我能做的最好的事情。

Answer 3

如果你想在不改变html的情况下使它工作，那么最好的办法就是简单地浮动：左;清楚：左;像这样：

span {
    float: left;
    clear: left;
    color: #FFF;
    padding: 30px;
}

显示：块;将不工作，因为它需要您设置宽度（否则它们将填充可用空间）。

display：inline-block;将不工作，因为仍然显示在同一行。

Answer 4

我也只是玩这个，只需在每个<br>元素之后放置inline-block即可找到我的解决方案。我知道它正在改变html，但只是略有改变！

如果要使用CSS创建换行符，请尝试使用:after伪类。这样的事情会起作用吗？

div.class:after {
  content:"\a";
  white-space: pre;
}