时间戳

首页 > 解决方案 > 为什么此文本未与我的 CSS 网格行垂直对齐？

html - 为什么此文本未与我的 CSS 网格行垂直对齐？

问题描述

我的网站将提供有关温度的信息，我希望读取温度，然后是度数符号和“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>

标签： htmlcssfrontendcss-grid

解决方案

改用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 {
  align-self: flex-start;
  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>

推荐阅读