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/

你的＆＃34;是＆＃34;现在比其他文本大，所以通过将此文本设置为＆＃34; middle＆＃34;通过暗示使其他文本也以水平轴为中心。

这可能产生的副作用是，中心不是用字母的可见高度来完成的，而是字母字形的大小，所以你会注意到{{1} i的{{1}}不在行，但在行中作为字形框，即使该字母可能不填充该字形框。

修改：

值得注意的是，is仅适用于内嵌， 内联块或内联表元素。因此，如果您的垂直对齐没有工作，请检查/确认您正在对齐的元素（其示例中的直接父级，例如您的vertical-align）被设置为这些<p>类型之一，上方。

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

Answer 2

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

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

Answer 3

Display为inline-block span。 span标记在p标记的下方，因此您需要将翻译价值从minus(-)更改为plus(+)

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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 */
}

Answer 5

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

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

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

如何在Y轴上移动文本

5 个答案: