Блог

Главная - Вопросы по программированию - получение текстового дна в том же вертикальном положении независимо от размера текста

получение текстового дна в том же вертикальном положении независимо от размера текста

#html #css #vertical-alignment

#HTML #css #выравнивание по вертикали

Вопрос:

У меня возникла небольшая проблема с 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>

Комментарии:

1. Без указанной высоты это невозможно. Верхний правый элемент не знает, какова высота верхнего левого элемента. То же самое для нижних элементов. Если вы можете использовать bottom вместо top position , то это было бы возможно.

Ответ №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>

Метки: