Как с точностью до пиксела выровнять текст по верху div? - PullRequest
Новая
       40

Как с точностью до пиксела выровнять текст по верху div?

0 голосов
/ 10 июля 2019

Я пытаюсь настроить текст так, чтобы он точно выровнялся по верхней части элемента 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.Есть идеи?Thnx!

Ответы [ 2 ]

0 голосов
/ 10 июля 2019

Попробуйте использовать типографский блок, чтобы расположить его. Например, я использовал отрицательные поля в em для проверки с разными размерами шрифта. 

#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>
0 голосов
/ 10 июля 2019

Я добавил line-height и менял его до тех пор, пока он не совпадал с полем ' Touch '. Поскольку 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>
...