HTML：テーブル内セルの垂直方向の中央揃えができません

Question

セル内の垂直方向の中央揃えがうまくいきません

htmlで表形式を使い、価格表を作っています
table.plan_boxで作った表を、blockで縦並びに表示しようと考えました。
二段目の『タイトル』、三段目『説明』について垂直方向の中央揃えを行おうと思い、vertical-alignを設定しましたがうまくいきません
四段目は上揃えのままにしたいです。
よろしくお願いいたします。

該当のソースコード

<table class="plan_box" border="3" frame="box">
   <tr>											 
     <th>
        画像が入ります
 　　</th>
　 　<td class="pb1">												 
        <h3>タイトル</h3>	
 　　</td>
     <td class="pb2">
  　　   <p>説明</p>	　
　 　</td>
     <td class="pb3"><p>価格</p>
	<p class=pb3>180,000円</p>
     </tr>
</table>

table.plan_box {
	width: 24%;
	display: table;
	height: 100%;
}

table.plan_box th,
table.plan_box td{ 
	display: block;
}

table.plan_box th{
	height: 280px;
}

td.pb1{
	height: 80px;
	vertical-align: middle;
}
.pb2{
	height: 180px;
	vertical-align: middle;
}
.pb3{
	height: 180px;
	vertical-align: top;
}

試したこと

css中　td.pb1にvertical-align: middle;を設定しました。
.pb1には詳細度を考え『td.pb1』として設定しました

Comments

[yambejp]

不要に見える半角・全角のスペースが大量にあるようです
これは削除してよいのでしょうか？

Answer 1

テーブルセルをdisplay:blockにしてはだめでしょう・・
もはや表の体をなしていません
それでもどうしてもというならdisplay:flexにして
align-items: centerを指定するとかで多少は調整できます

Comments

[TAK-AC]

ありがとうございました。

Answer 2

vertical-alignは、位置を揃えたい「インライン要素」か「テーブルセル」に使うため、thやtdに対してdisplay: block;してしまっているので効かないと思います。

縦並びにしたいのでしたら
現在trで全てのテーブルセルを囲っていますが
それを、テーブルセルそれぞれ囲むように変更するか、（参考になると思います→　https://tabletag.net/ja/）
既に回答があるように、display:flex;にして、文字揃えもflexboxとして変更していくかになると思います。

あと、<p class=pb3>180,000円</p>後のtdの閉じタグが抜けています。