准确设置文字位置

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>

结果如下：

因此，现在我希望“朋克”与15的高度相同。以便使文本“朋克”与“ 15”的底部对齐。

我尝试了很多，但是没有用。

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。它是内联显示的。

Answer 2

只需使用flex-direction: column;，默认值为row，即可水平对齐文本。

.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: 10px;
  font-family: Montserrat-Medium;
}

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

p {
  margin: 0;
}

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

Answer 3

您只需添加：

StringBody("""{ "testmail": ${email}, "testmailagain": ${email}, }""")).asJson

到.punkte_text：

align-self: center;