vartical-align inline-block 効かない

vartical-alignを使っても文字が中央に来ない理由が知りたいです。

ここに質問の内容を詳しく書いてください。
この前htmlとcssを始めたばかりでサルワカさんを参考に勉強していたのですが、
そこに出てくるコードをそのままコピーするような形でやってもうまくいかなかったので質問させてください。
また検索等で調べてもvartical-alignはインライン要素しか効かないとしかでておらず今自分が困っている状況の答えがありませんでした。

https://saruwakakun.com/html-css/basic/display
具体的には↑のページの「メニューバーを作ってみよう」という項目です。

<!DOCTYPE html>
<html>
<head>
<title>CSS練習</title>
<style>
#nav ul {
list-style-type: none;
text-align:center
}
#nav ul li {
display: inline-block;
width: 80px;
height: 40px;
padding: 10px 0;
margin: 10px 0;
vertical-align: middle;
background: skyblue;
font-weight bold;
color:white
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>HOME</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
</body>
</html>

これで実行すると

このようになってしまいます。
いろいろいじったりしてみるとdisplay: inlineで形は違えど文字は枠の真ん中に来るのでたぶんinline-blockにするとダメになっているとは思うのですが記事の方ではvartical-alignは使えると書いているので困惑しています。
もしよろしければ教えてください。

行動規範の内容に同意します

回答2件

記事のサンプルにはheight: 40px;が設定されていないので。
また、vertical-align: middle;は内包しているテキストに効いているのではなく、青い部分（li要素）に効きます。

投稿2018/07/16 05:41

kei344

総合スコア69407

inunekotanuki

2018/07/16 07:51

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

行動規範の内容に同意します

ベストアンサー

「kei344」さんの回答どおりです。

（補足です）
今は全ての<li>の高さが同じなので分かりにくいかもですが、それぞれの<li>に違う高さを3種類設定するとvertical-align: middle;の適用後の形と、値をtopやbottomと、変えると分かりやすいかと思います。
HTMLを以下に書き換えて確認してみてください。

HTML
1<div id="nav">
2  <ul>
3    <li style="height: 50px;line-height: 50px;">HOME</li>
4    <li style="height: 100px;line-height: 100px;">HTML</li>
5    <li style="height: 150px;line-height: 150px;">CSS</li>
6  </ul>
7</div>

文字の位置（1行の場合）は要素の高さと同じline-heightの設定で上下の中央に来ます。その他の方法や上下に寄せたり、複数行の場合等はご自身で検索して勉強してみてください。

投稿2018/07/16 06:38