javascript - 准确设置文本位置

Question

.noten_stats {
  height: 200px;
  background: #cc2b5e;
  background: -webkit-linear-gradient(to right, #753a88, #cc2b5e);
  background: linear-gradient(to right, #753a88, #cc2b5e);
  border-radius: 5px;
  box-shadow: 1px 1px 5px #ddd;
}

.noten_stats_title {
  color: #ffffff;
  height: 20%;
  padding: 20px;
  font-family: Montserrat-Medium;
}

.punkte_container {
  height: 80%;
  margin: auto;
  width: 50%;
  display: flex;
  justify-content: center;
}

.punkte {
  color: #ffffff;
  font-size: 50px;
  font-family: Montserrat-Bold;
}

.punkte_text {
  color: #ffffff;
  font-family: Montserrat-Medium;
}

<div class='noten_stats'>
  <p class="noten_stats_title">Deine Durchschnittsnote</p>
  <div class="punkte_container">
    <p class="punkte">15</p>
    <p class="punkte_text">Punkte</p>
  </div>
</div>

结果如下所示：

所以现在我希望“Punkte”与 15 的高度相同。这样文本“Punkte”就在“15” 的底部对齐。

我尝试了很多，但没有任何效果。

标签： javascripthtmlcssuser-interface

Answer 1

.noten_stats {
  height: 200px;
  background: #cc2b5e;
  background: -webkit-linear-gradient(to right, #753a88, #cc2b5e);
  background: linear-gradient(to right, #753a88, #cc2b5e);
  border-radius: 5px;
  box-shadow: 1px 1px 5px #ddd;
}

.noten_stats_title {
  color: #ffffff;
  height: 20%;
  padding: 20px;
  font-family: Montserrat-Medium;
}

.punkte_container {
  margin: auto;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.punkte {
  color: #ffffff;
  font-size: 50px;
  font-family: Montserrat-Bold;
}

.punkte_text {
  color: #ffffff;
  font-family: Montserrat-Medium;
}

<div class='noten_stats'>
  <p class="noten_stats_title">Deine Durchschnittsnote</p>
  <div class="punkte_container">
    <span class="punkte">15</span>
    <span class="punkte_text">Punkte</span>
  </div>
</div>

使用span而不是p. 它显示内联。