无论文本大小如何，都将文本底部置于相同的垂直位置

Question

我遇到了这个 css 小问题，我希望文本的底部位于相同的垂直位置，即使它们的字体大小不同。但显然这不是它的工作原理。实现这一目标最直接的方法是什么？所以我希望左下角和右下角以及左上角和右上角垂直对齐。

<html>
<head>
<style>
.container {
  position: relative;
  width: 300px;
  height: 100px;
}
.topright {
  position: absolute;
  top: 20px;
  right: 16px;
  font-size: 8px;
}
.topleft {
  position: absolute;
  top: 20px;
  left: 16px;
  font-size: 28px;
}
.bottomright {
  position: absolute;
  top: 100px;
  right: 16px;
  font-size: 28px;
}
.bottomleft {
  position: absolute;
  top: 100px;
  left: 16px;
  font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
  <div class="topleft">Top Left</div>
  <div class="topright">Top Right</div>
  <div class="bottomleft">Bottom Left</div>
  <div class="bottomright">Bottom Right</div>
</div>
</body>
</html>

Answer 1

定位是从元素的边缘开始的。你不能真正从内部文本的基线定位，但你可以通过考虑 font-height 来伪造它。（虽然不同的字体对基线和字体高度的关系有不同的想法，所以如果在每个位置使用不同的字体，这可能不起作用。）

（calc() 不是必需的，但在这里用于说明数学。）

.container {
  position: relative;
  width: 300px;
  height: 100px;
}
.topright {
  position: absolute;
  top: calc(20px - 8px);
  right: 16px;
  font-size: 8px;
}
.topleft {
  position: absolute;
  top: calc(20px - 28px);
  left: 16px;
  font-size: 28px;
}
.bottomright {
  position: absolute;
  top: calc(100px - 28px);
  right: 16px;
  font-size: 28px;
}
.bottomleft {
  position: absolute;
  top: calc(100px - 18px);
  left: 16px;
  font-size: 18px;
}

<div class="container">
  <div class="topleft">Top Left</div>
  <div class="topright">Top Right</div>
  <div class="bottomleft">Bottom Left</div>
  <div class="bottomright">Bottom Right</div>
</div>

无论文本大小如何，都将文本底部置于相同的垂直位置

get text-bottom on same vertical position no matter text size

html

css

vertical-alignment