Блог

Главная - Вопросы по программированию - Выравнивание базовой линии текста по контейнерам flexbox в CSS

Выравнивание базовой линии текста по контейнерам flexbox в CSS

#css #flexbox #css-grid

Вопрос:

Я хотел бы создать этот макет:

Я могу пройти большую часть пути, используя flexbox и align-self: baseline :

 <div style="background-color: #fce5cdff; display: flex; height: 4.35cm;">
  <div style="font-size: 24pt">Ferry to Brookfield</div>
  <div style="font-size: 96pt; align-self: baseline">3</div>
  <div style="font-size: 9pt; align-self: baseline">min</div>
</div>

Это выглядит так (JSFiddle):

Отсюда я не могу понять, как добавить текст «оставить», чтобы его базовая линия совпадала с текстом «3 минуты». Вот попытка (JSFiddle).

Как я могу создать этот макет в CSS?

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

1. Почти невозможно, символы символов должны иметь вертикальное пространство сверху и снизу. На самом деле это запечено в купели.

2. Обратите внимание, что это pt предназначено для печати, а не для Интернета. w3.org/Style/Examples/007/units.en.html

Ответ №1:

Попробуй это…

 <div style="background-color: #fce5cdff; display: flex; height: 4.35cm;">
    <div style="display: flex; flex-direction: row;justify-content: space-between">
        <div>
            <h1 style="font-size: 24pt;font-weight:300;margin-bottom:47px">Ferry to Brookfield</h1>
            <div style="font-size: 9pt; text-align: right;">leave in</div>
        </div>
        <div style="font-size: 96pt">3<span style="font-size:9pt">min</span></div>
    </div>
</div>

Ответ №2:

вы можете сделать это с absolute помощью позиционирования и псевдоэлементов:

 .wrapper{
  background-color: #fce5cdff;
  display: flex;
  height: 4.35cm;
  font-size: 24pt;
}
span{
  font-size: 96pt;
 line-height: 96pt;
 position: relative;
 margin-left: 2pt;
}
span::before {
  content: "leave in";
  position: absolute;
  font-size: 10pt;
  bottom: 6pt;
  left: -6ch;
}
span::after {
  content: "min";
  position: absolute;
  font-size: 10pt;
  bottom: 6pt;
  right: -3ch;
} 
 <div class="wrapper">
    Ferry to Brookfield <span>3</span>
</div>
Метки: