text-alignを使用したい。

どうにかして、画像を中央揃えにしたいです。
画像のように、３枚の画像を中央揃え、画像の直下にテキストを１行入れるようにしたいです。

現在の状況を説明します。
画像を３枚貼り、その下にテキストを入れたいので、imgタグをpタグで囲んでその上でbrタグを使い、改行を用いて、画像の直下にテキストを持ってくることに成功しました。

そして親要素としてdivタグでこれらを囲みました。

ここでtext-alignはブロックコンテナに対して使えるもので、その作用はブロックコンテナ内のインライン要素に対して配列を制御するということを知りました。

今の僕の状況を整理すると、ブロックコンテナであるdivタグに対してtext-alignを使いたいにも関わらず、その中にはブロック要素であるpタグのなかにインライン要素であるimgタグが存在しています。

なので、うまくtext-alignが作動？してくれません。何か良い解決方法があれば教えていただきたいです。

html
1<h2 class="third">コース一覧</h2>
2     <div class="thirtiary">
3       <p><img src="images/デイトラ/img/web_first.png" alt="初級コースの説明"><br>HTML/CSS/Bootstrap</p>
4       <p><img src="images/デイトラ/img/web_second.png" alt="中級コースの説明"><br>HTML/CSS/JavaScript/jQuery</p>
5       <p><img src="images/デイトラ/img/web_third.png" alt="上級コースの説明"><br>PHP/WordPress</p>
6     </div>

CSS
1.third {
2  text-align: center;
3  margin-bottom: -20px;
4}
5.thirtiary {
6  text-align: center;
7}
8.thirtiary img {
9  width: 350px;
10  margin-top: 30px;
11}