如何调整特殊风格？

Question

所以我想创建一种显示在此位图中的样式：

注意：绿色条仅用于显示路线属性。

我想要一个大文本，该大文本居中于标题的中间（“ 422”），右侧是一个较小的文本（“ 222”），该文本与左侧的图标垂直对齐。

这2个文本应从顶部对齐，以便（“ 422”和“ 222”）具有相同的y位置。

到目前为止，这是我所得到的，但是此解决方案既无响应，也无济于事。因此，我们将不胜感激任何帮助。

注意：#header div必须是绝对元素

#header {
  position: absolute;
  left: 0%;
  top: 2%;
  height: 30%;
  width: 100%;
  border-radius: 10px;
  border: 1px solid black;
}

#header .coin {
  position: absolute;
  right: 6%;
  height: 50%;
  top: 0;
  display: flex;
  align-items: center;
  flex-direction: row;
}

#header .coinImage {
  position: relative;
  height: 70%;
}

#header .coinText {
  position: relative;
  margin-left: 12%;
  font-size: 8vw;
  color: blue;
}

#header .result {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40%;
  height: 100%;
  font-size: 19vw;
  margin-top: 3%;
  color: black;
}

<div id="header">
  <div class="coin">
    <img class="coinImage" src="https://cdn4.iconfinder.com/data/icons/keynote-and-powerpoint-icons/256/Messages-512.png">
    <span class="coinText">22</div>
      <div class="result">
        33
      </div>
    </div>

Answer 1

您可以依靠vertical-align和line-height对其进行近似：

我还添加了绿色条来显示

.result {
  font-size: 19vw;
  color: black;
  text-align: center;
  line-height: 0.6;
  padding:5vh;
  background: 
    linear-gradient(green,green) center/5px 100% no-repeat,
    linear-gradient(green,green) 50% calc(5vh - 10px)/44% 5px no-repeat;
}

.coinText {
  font-size: 8vw;
  color: blue;
  vertical-align: top;
  display: inline-flex;
  align-items: center;
  line-height: 0.5;
  width:0;
}

img {
  width: 4vw;
}

<div class="result">
  33<span class="coinText"><img class="coinImage" src="https://cdn4.iconfinder.com/data/icons/keynote-and-powerpoint-icons/256/Messages-512.png">22</span>
</div>