Question

我正在尝试调整文本以使其完全与div的顶部对齐，以使最高字符的顶部“触摸”到div的顶部。无论大小如何，我都需要一个可扩展的解决方案，它可以包括CSS和JS操作/计算。我知道表格，表格单元格和垂直对齐方式，但是这些仍然不能将文本精确地移到顶部。

这里是一个示例：https://codepen.io/saar62097/pen/MMLmyr

#container {
  position: absolute;
  background-color: black;
  width: 300px;
  height: 250px;
}

#text {
  color: white;
  font-size: 60px
}

<div id="container">
  <div id="text">hello world<br>how r u?</div>
</div>

我希望文本“触摸” div的顶部。有任何想法吗？谢谢！

Answer 1

我添加了 line-height 并对其进行了更改，直到它与“ 触摸” div边距匹配为止。由于 top: 0; 不适用于文本。

#container{
  position: absolute;
  background-color: black;
  width: 300px;
  height: 250px;
  padding: 0;
}

#text{
  top: 0;
  color: white;
  padding: 0;
  font-size: 60px;
  line-height: 43px;
}

<div id="container">
  <div id="text">hello world<br>how r u?</div>
</div>

Answer 2

尝试使用印刷单元进行放置。例如，我在#container { position: absolute; background-color: black; width: 300px; height: 250px; } #text { color: white; font-size: 60px; margin-top: -0.25em; /* Negative margins in typography Unit */ } #container2 { position: absolute; background-color: black; width: 300px; height: 250px; margin-left: 350px; } #text2 { font-size: 30px; /* Half the font-size */ color: white; margin-top: -0.25em; }中使用负边距来测试不同的字体大小。

<div id="container">
  <div id="text">hello world<br>how r u?</div>
</div>

<div id="container2">
  <div id="text2">hello world<br>how r u?</div>
</div>

/modules/form/templates/components/myFormProcessor

如何将像素完美地对齐到div的顶部？

2 个答案: