Question

当行高大于字体大小的1.1倍时，文本会在行中垂直居中。它可以垂直对齐吗？

在这个例子中

p {
  background-color: pink;
  font-size: 20px;
  line-height: 40px
}

span {
  background-color: lightblue;
}

<p>
  <span>Hello World</span> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
</p>

我希望文字贴在粉红色方框的顶部。所有额外的粉红色空间都将低于蓝色，而不是在每条线的上方和下方分开。蓝色的盒子会贴在粉红色的顶部。我没有找到vertical-align: top或在{span}中添加line-height来提供帮助。

（编辑表明文字可能很长。）

Answer 1

与Daniel的答案不同，但我想这也符合您的要求？

p {
  background-color: pink;
  font-size: 20px;
  vertical-align: top;
  height: 40px;
}

span {
  background-color: lightblue;
}

<p>
  <span>Hello World</span> Hello World
</p>

好吧，如果您的文字是多行的，我只能想到这个解决方案：

$("#fontsize-input").on("input",() => {
  $("p").css("font-size",$("#fontsize-input").val()+"px");
});

p {
  background-color: pink;
  font-size: 25px;
  line-height: 2em;
}

span {
  position: relative;
  top: calc(-0.45em + 1px);
}

.highlight {
  background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="10" max="40" id="fontsize-input"/>
<p>
  <span class="highlight">Hello World</span> <span>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World</span>
</p>

Answer 2

使用填充的解决方案：

＆＃13;

p {
  background-color: pink;
  font-size: 20px;
  padding: 0 0 20px 0;
  /* padding for top,right,bot,left */
}

span {
  background-color: lightblue;
}

＆＃13;

<p>
  <span>Hello World</span> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
</p>

＆＃13;

Answer 3

为了保持行高，您可以向范围添加display: inline-block; 元件。

＆＃13;

p {
  background-color: pink;
  font-size: 20px;
  line-height: 40px
}

span {
  background-color: lightblue;
  display: inline-block;
}

＆＃13;

<p>
  <span>Hello World</span> Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
</p>

＆＃13;

将跨度对齐其容器的顶部

3 个答案: