如何在 Y 轴上移动文本答案

【问题标题】：How to move a text on the Y axis如何在 Y 轴上移动文本
【发布时间】：2016-07-22 08:33:32
【问题描述】：

正如我的 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%);
}

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

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

您的“is”现在比其他文本大，因此通过将此文本设置为“middle”会导致其他文本也隐含在水平轴上。

这样做的一个可能的副作用是居中不是用字母的可见高度而是用字母字形的大小来完成的，所以你会注意到也许i is 不在行内，但它作为字形框在行内，即使该字母可能没有填充该字形框。

编辑：

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

非常good read about Vertical align can be found here。

【讨论】：

确实如此。我之前尝试过，它实际上就像在你的小提琴中一样。 jsfiddle.net/9r81ry8c/6 。出于某种原因，在我的 wordpress 网站中这不起作用。但我只是尝试使用 vertical-align sub，它在 jsfiddle 和 WordPress 上都能完美运行。 jsfiddle.net/9r81ry8c/8
@WosleyAlarico 我已经用我认为可以解释你的 WP 行为的东西更新了我的答案。

【解决方案2】：

尝试如下所示的垂直对齐道具

span {
    font-size: 60px;
    vertical-align:middle;
    line-height:1;
}
p {
    vertical-align:middle;
    line-height:1;
}

【讨论】：

line-height: 1; ?
设置行高为字体大小的100%

【解决方案3】：

Display 为 inline-block 为 span。 span 标记从 p 标记进一步向下，因此您需要将翻译值从 minus(-) 更改为 plus(+)

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

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

【讨论】：

【解决方案4】：

您只能在布局受 CSS 框模型控制的元素上使用 CSS transform。

Here your updated jsfiddle

所以要使用变换，首先你需要使用一个正值然后你必须为你设置 display: inline-block [span]。为了完全兼容，我建议您甚至添加 Safari 和 IE 语法

span{
    font-size: 60px;
    display: inline-block;
    -ms-transform: translate(10%); /* IE 9 */
    -webkit-transform: translate(10%); /* Safari */
    transform: translateY(10%); /* Standard syntax */
}

【讨论】：

【解决方案5】：

我已经修改了你的风格，检查一下。

span{
    font-size: 60px;
    vertical-align: middle;
}

工作小提琴链接 - https://jsfiddle.net/9r81ry8c/7/

【讨论】：

@LoneRanger.Thanks 它也有效。有什么办法可以让我在 div 中的文本的每个第二个单词上玩一玩吗？我正在尝试使用伪选择器 :second-word(2n) 但它不起作用