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

【问题标题】：Why is this text not aligned vertically to my CSS grid row?为什么此文本未与我的 CSS 网格行垂直对齐？
【发布时间】：2020-03-06 00:53:50
【问题描述】：

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

【问题讨论】：

标签： html css frontend css-grid

【解决方案1】：

改用 CSS flex-box。它比 CSS 网格更加灵活和响应迅速。只需运行代码 sn -p 你就会看到。

.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>

【讨论】：

【解决方案2】：

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>

【讨论】：

感谢您的帮助！我明白你为什么现在使用 span 标签了。效果很好。

【解决方案3】：

标题通常带有默认边距。从 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>

【讨论】：