Почему этот текст не выровнен вертикально к моей строке сетки CSS?

Question

Мой веб-сайт будет содержать информацию о температуре, и я надеюсь получить показания температуры, за которыми следуют знак градуса и либо «C», либо «F». На странице есть другая информация о погоде, поэтому я использую сетку CSS, чтобы разметить страницу и разбить все разделы. Когда я делаю размер шрифта примечания степени, степень перемещается выше на странице. Я бы хотел, чтобы оно было приведено в соответствие со значением температуры, но я не могу понять, что происходит на странице. Любая помощь будет удивительной.

Фотография проблемного текста:

.wrapper {
  display: grid;
  grid-template-rows: 200px 100px;
  padding-bottom: 2.5em;
}

.temp {
  display: grid;
  grid-template-columns: 150px 150px;
  padding: none;
  font-size: 3em;
  align-content: center;
  justify-content: center;
}

.degree-note {
  font-size: 30px;
  align-content: center;
}

<div class="wrapper">
  <img class='loading-text' src='img/weather-app-loading.png'>

  <div class='temp'>
    <h2 class='temp-degree'>34</h2>
    <h2 class='degree-note'>&deg C</h2>
  </div>
</div>

Answer 1

Используйте взамен CSS flex-box . Это гораздо более гибкий и отзывчивый, чем CSS-сетка. Просто запустите фрагмент кода, который вы увидите.

.wrapper {
  display: flex;
  flex-direction: column;
  padding-bottom: 2.5em;
}

.temp {
  align-items: center;
  display: flex;
  font-size: 3em;
  padding: none;
}

.temp-symbol {
  font-size: 30px;
}

<div class="wrapper">
  <img class='loading-text' alt="your image" src='img/weather-app-loading.png'>

  <h2 class='temp'>
    <span class='temp-number'>34</span>
    <span class='temp-symbol'>&deg C</span>
  </h2>
</div>

Answer 2

Заголовки обычно идут с полями по умолчанию. Удалите эти поля из ваших h2 элементов. Это должно привести вас туда, куда вы хотите пойти.

Затем для большей точности установите равную высоту строки для содержимого.

Добавьте это к своему коду:

.temp {
  line-height: 1;      /* inherits to children */
}

.temp-degree {
  margin: 0;           /* remove default margin */
  text-align: right;   /* optional; eliminates gap between elements */
}

.degree-note {
  margin: 0;           /* remove default margin */
}

.wrapper {
  display: grid;
  grid-template-rows: 200px 100px;
  padding-bottom: 2.5em;
}

.temp {
  display: grid;
  grid-template-columns: 150px 150px;
  font-size: 3em;
  align-content: center;
  justify-content: center;
  line-height: 1; /* inherits to children */
}

.temp-degree {
  margin: 0; /* remove default margin */
  text-align: right;
}

.degree-note {
  font-size: 30px;
  margin: 0; /* remove default margin */
}

<div class="wrapper">
  <img class='loading-text' src='img/weather-app-loading.png'>
  <div class='temp'>
    <h2 class='temp-degree'>34</h2>
    <h2 class='degree-note'>&deg C</h2>
  </div>
</div>

Answer 3

H2 тег будет ломать строку. Используйте вместо тега span добавление определенного класса к тексту.

.wrapper {
    display:grid;
    grid-template-rows: 200px 100px;
    padding-bottom: 2.5em;
}
.temp{ 
    position: relative;
    display:grid;
    grid-template-columns: 150px 150px;
    padding: none;
    font-size: 3em;
    align-content: center;
    justify-content: center;
}

.degree-note {
    position: absolute;
    top: 1rem;
    font-size: 30px;
    align-content: center;
    }

<div class="wrapper">
      <img class='loading-text' src='img/weather-app-loading.png'></img>

      <div class='temp'>
        <h2>
        <span class='temp-degree'>34</span>
        <span class='degree-note'>&deg C</span>
        </h2>
      </div>
    </div>