大きさの違う文字をvertical-align: text-bottomで中央揃えにしたい

Question

前提・実現したいこと

大きさの違う文字を中央に並べて、
小さい文字を大きい方の文字の下に揃えたいです。

発生している問題・エラーメッセージ

要素が真ん中に行ってくれません…

該当のソースコード

<div class="points">
   <span class="num">30</span>
   <span class="point">点</span>
</div>

.points {
  margin: 0 auto;
}

.num .point {
  vertical-align: text-bottom;

試したこと

ほか、

.num .point {
  vertical-align: text-bottom;
　text-aline: center;

もだめでした

今やってみたこと

p要素にしてみました。。

 <div class="box">
                <div class="points">
                    <p class="num">30</p>
                    <p class="point">点</p>
                </div>
                
                <div class="comment">
                    <span>文字文字文字文字文字<br>
                    文字文字文字文字文字文字文字文字</span>
                </div>
            </div>

.box {
  font-family: "Sawarabi Gothic", "Yu Gothic Medium";
  border: solid 10px #FFF;
  border-radius: 10px;
}

@media (max-width: 667px) {
  .box {
    max-width: 335px;
    border: solid 5px #FFF;
  }
}

.box .num {
  font-size: 160px;
}

@media (max-width: 667px) {
  .box .num {
    font-size: 80px;
  }
}

.box .point {
  font-size: 100px;
}

@media (max-width: 667px) {
  .box .point {
    font-size: 50px;
  }
}

.points {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

なんとか真ん中にいってくれましたが、
今度は小さい方の文字が、上に寄ってしまいます。

どうぞ、お時間ありましたら
助けて頂けますと幸いです。
よろしくお願いします。

Answer 1

こんにちは。

これでいかがですか？

.num, .point { /* カンマ忘れています。 */
  vertical-align: baseline;
  /* vertical-align: text-bottom; */
}

---

CSSのインライン配置の分かりにくい仕様については、以下の記事がかなりわかりやすいです。

Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira

コメントを受けて追記

サンプルを作りました。

.points {
  text-align: center;
}

Comments

[nomura02]

ありがとうございます。
まだ解決してないです…
カンマいれて、テキストアラインセンター、
ではないんでしょうか？
paddingとか…

[Lhankor_Mhy]

横方向に中央揃えもするのですか？

[nomura02]

今修正してみたんですけども、
「　　30点　　」
と真ん中に動いてほしいのです…

[Lhankor_Mhy]

追記しました。

[nomura02]

インライン要素のままの方が良かったですかね…
今やってみます！！！ありがとうございます

[Lhankor_Mhy]

ああ、ブロック要素でやりたかったのですね……
ちょっと考えなおします。

[nomura02]

いえ！！でもうまく行きました！！！
ブロック要素だとまたややこしくなりそう…
小さい文字の方を、大きい「30」の下辺にあわせなくちゃいけなくなるという事態がまた発生してしまいます…
後学のために知りたい気もしますが、取り急ぎ、インライン要素で、
孫要素をバーティカルアライン　ベースライン、
子要素をテキストアライン　センター
で、思ったようになりました。

[Lhankor_Mhy]

なるほど、ひとまずご解決されて何よりです。

[nomura02]

助かりました！！！ありがとうございます????