HTML初心者ですが縦の制御vertical-alignがうまくいかないです。

Question

前提・実現したいこと

HTML初心者ですが横並びのメニュー画面を作成していますが縦の制御がうまくいかず困っています
完成予定としてはおにぎり、お茶、おやつ、バナナ、敷物が横並びになり（ここまでは実現完了）、縦横真ん中に項目がそれぞれきているようなメニュー画面にしたいです。

発生している問題

縦の制御がうまくいかず上端に並んだままになっています

<menu>
    <ul>
        <li>おにぎり</li>
        <li>お茶</li>
        <li>おやつ</li>
        <li>バナナ</li>
        <li>敷物</li>
    </ul>
</menu>

menu{
    height: 62px;
}
menu ul{
    display: flex;
    height: 62px;   
}
menu ul li{
    text-align: center;
    vertical-align:middle;
    flex:auto;
}

試したこと

最初は『menu ul li』をインラインブロックにしてしまっておりそのことがダメなのかと思い記述を消してみたが結局変化ありませんでした。

補足情報（FW/ツールのバージョンなど）

vertical-alignは縦の制御を行いインライン要素に対して有効と学習したのですがなぜダメなのでしょうか？？

Comments

[m.ts10806]

>HTML初心者ですが
「初心者アイコン」を質問につけられるのでわざわざ書かなくても良いです。

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[eio]

すいませんでした。
以後気を付けます。

[miyabi_pudding]

質問は編集できるので、
以後ではなく、この質問からやりましょう。

[m.ts10806]

あの、初心者アイコンの件は・・・
タイトル入力エリアの左側にあるマークを押して活性化するだけです。

[eio]

初心者マーク着けさせていただきました。

[eio]

訂正；付けさせて

[m.ts10806]

はい。確認しました。
今後でいいので「初心者アイコンつけることでタイトルや本文に”初心者”って書く必要がない（むしろその分無駄な文字数使ってる）」部分も意識してもらえたらと。

[eio]

ご指摘ありがとうございます。
以後気を付けます。

Answer 1

- vertical-align:middle;

menu ul{
  display: flex;
  height: 62px;   
+ align-items: center;
}

Comments

[eio]

的確な回答ありがとうございましたalign-itemsというのを初めて目にしたのでググって調べてみたのですがFlexboxを使う場合vertical-alignは使えないという事を知りました。
実はこの部分がわからず数日さまよっており大変助かりました。ありがとうございます。