Question

我正在尝试将div中某些文本的 baseline 与所说的div的最底边对齐（例如g和j实际上会使div溢出

我似乎只能将文本元素的底部边缘与div的底部边缘对齐。我尝试在内部和外部元素上使用vertical-align和baseline值的bottom，但是没有成功。

div {
  height: 80px;
  width: 300px;
  background: #ff5;
  position: relative;
}

span {
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
}

<div>
  <span>
  TEST gjp ABC
  </span>
</div>

我还希望能够从div的底部偏移基线（例如bottom: 10px;从底部开始放置文本 10px 的基线div的边缘。

编辑：我还应该提到我想将position: absolute;属性保留在span元素上，因为我想自由地将多个div.放置在父{ {1}}

例如，在这里， A 的基线应位于div的底部边缘， B 的基线应在上方 10px 它和 C 的 20px ：

div {
  height: 80px;
  width: 300px;
  background: #ff5;
  position: relative;
}

span {
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
}

<div>
  <span style="left: 0px; bottom: 0px;">
  A
  </span>
  <span style="left: 50px; bottom: 10px;">
  B
  </span>
  <span style="left: 100px; bottom: 20px;">
  C
  </span>
</div>

Answer 1

添加高度为100％且高度为::before的{{1}}伪元素，并使用其将display: inline-block;与基线垂直对齐：

<span>

div {
  height: 80px;
  width: 300px;
  background: #ff5;
  position: relative;
}

div::before {
  display: inline-block;
  height: 100%;
  content: '';
}

span {
  font-size: 30px;
  vertical-align: baseline;
}

您可以将相同的想法应用于跨度本身，但是必须声明跨度的高度：

<div>
  <span>TEST gjp ABC</span>
</div>

div {
  height: 80px;
  width: 300px;
  background: #ff5;
  position: relative;
}

span {
  display: inline-block;
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1em;
  background: red;
}

span::before {
  display: inline-block;  
  height: 100%;
  vertical-align: baseline;
  content: '';
}

Answer 2

您还可以将行高降低到0.8em，以使文本溢出跨度。

<div style="height: 80px; width: 300px; background: #ff5; position: relative;">
	<span style="font-size: 30px; position: absolute; left:0; bottom:0;line-height:0.8em;">
		TEST gjp ABC
	</span>
</div>

Answer 3

使line-height等于0的跨度，然后考虑一个将控制对齐的隐藏字符。您可能需要根据使用的字体调整值：

.container {
  height: 80px;
  width: 400px;
  background: #ff5;
  position: relative;
}

.container>span {
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
  line-height: 0;
}

.container>span:before {
  content: "\200B";
  vertical-align: -0.35em;/* Adjust this */
}

<div class="container">
  <span>TEST gjp ABC</span>
  <span style="font-family:arial;right:0;left:auto;font-size:20px">TEST gjp ABC</span>
</div>

您还可以简单地考虑翻译：

.container {
  height: 80px;
  width: 400px;
  background: #ff5;
  position: relative;
}

.container>span {
  font-size: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
  line-height: 0;
  transform: translateY(-0.35em);
}

<div class="container">
  <span>TEST gjp ABC</span>
  <span style="font-family:arial;right:0;left:auto;font-size:20px">TEST gjp ABC</span>
</div>

将文本基线与div的底部对齐

3 个答案: