html - 如何在 Y 轴上移动文本

Question

正如我的 jsfiddle 所示，我正在尝试将 span 标记进一步向下移动，以便段落文本的其余部分可以位于它的中间。 https://jsfiddle.net/9r81ry8c/1/

html:

<div>
  <p> This <span>is</span> awesome </p>
</div>

CSS:

span{
  font-size: 60px;
  transform: translateY(-20%);
}

当我们在文本中间放置一条水平线时，示例是相同的:- This -。很明显，在我的例子中，这些行现在是文本段落。如何将 span 标签垂直向下移动以实现此目的？

Answer 1

CSS vertical-align属性正是针对这种情况:

span{
    font-size: 60px;
    vertical-align:middle;
 }
 p {
    display: inline-block; /* see edit below */
 }

https://jsfiddle.net/9r81ry8c/14/

您的"is"现在比其他文本大，因此通过将此文本设置为“中间”会导致其他文本也暗示在水平轴上居中。

这样做的一个可能的副作用是，居中不是根据字母的可见高度，而是根据字母字形的大小，因此您可能会注意到 i的 is不在一行中，但它作为一个字形框是在一行中，即使该字母可能没有填充那个字形框。

编辑:

值得注意的是vertical-align将仅适用于内联，inline-block 或 inline-table 元素。因此，如果您的垂直对齐不起作用，请检查/确认您正在对齐的元素(它的直接父元素，例如您的示例中的 <p>)设置为这些元素之一 display类型，上面列出。

一个很good read about Vertical align can be found here .