CSSで組んだ縦中横が左にずれる

Question

<p class="txt">１コマ<span class="txt_num">90</span>分の授業</p>

上記の文章は縦書きで、「90」だけ縦中横にしたいと思い、

.txt{
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  float: left;/*縦書き2列の左側に回り込ませてます*/
  letter-spacing: 0.2em;
  text-align: right;
  padding-right: 16px;
  line-height: 100%;
  border-right: solid #fff 1px;
  height: 444px;
}
.txt_number{
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
  padding-right: 5px;/*これで右に寄らないかな？と思いましたがだめでした。padding自体意味がないのかな。*/
}

以上のコードを書きましたが「90」の数字だけ少し左によってしまいます。
色々調べてみたのですがどうしても解決できません。
どうかお知恵をかしてください。

Comments

[miyabi_pudding]

HTMLと、ずれている環境（ブラウザ）の記載もお願いします。

[xminimx]

htmlは上の通りで、ブラウザはchromeですがsafariでもずれているそうです。

[m.ts10806]

>「90」だけ縦中横
こうしたいということですか？

１
コ
マ
90
分
の
授
業

[miyabi_pudding]

「そうです」ということはご自身では確認されてないのでしょうか？？

[xminimx]

mts10806さん
そういうことです。90がきれいに行の真ん中にきたらよいのですが。。。

miyabi_takatsukさん
私がwindowsを使っているのでsafariで確認できなくて…恥ずかしながら他の方にチェックをしていただいています。

Answer 1

.txt{
  letter-spacing: 0.2em;
}

こちらのletter-spacingが影響してそうなので

// class名こうですよね？
.txt_num{
  letter-spacing: normal;
}

としてあげたらどうでしょうか。

Comments

[xminimx]

class名のミスまでご指摘いただきありがとうございます。
教えていただいた方法で解決しました。

[退会済みユーザー]

よかったです！！

Answer 2

下記でいかがでしょうか。
あと、hokuto_さんのおっしゃる通り、クラス名が間違ってます。

.txt_num {
  display: inline-block;
  vertical-rlign: middle;
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
  padding-right: 0.3em;
}