li>a内のテキストの中央寄せ

前提・実現したいこと

li>a内のテキストを上下中央寄せしたいです。

発生している問題・エラーメッセージ

縦方向は中央に寄っていますが、横方向は左に寄ってしまいます。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
      <meta charset="UTF-8">
      <style>
            nav{
                  display:flex;
                  justify-content:center;
            　　}
            li, li a{
                  width:50px;
                  height:50px;
                  display:flex;
                  align-items:center;
                  text-align:center;
            　　　　　}
      </style>
</head>
<body>
      <nav>
            <li><a href="#">あ</a></li>
            <li><a href="#">い</a></li>
            <li><a href="#">う</a></li>
      </nav>
</body>
</html>

試したこと

liにtext-align:centerを書くことで中央に寄ると思ったのですがうまく行きませんでした。
色々ググってみましたが見つかりませんでしたので、こちらで初めて質問させていただきました。
初心者質問で申し訳ありませんが、よろしくお願いいたします。

Yorrie

2020/05/23 00:40

HTMLやらCSSやらのソースコードは、マークダウン記法のコードブロック内に記述してください。 (編集画面の「<code>」って書いてるやつを押すと出てくるアレです)

退会済みユーザー

2020/05/23 03:55

教えていただきありがとうございます！ <code>内に記述し直しました。

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

回答2件

・liタグを包括する親要素のulタグがありません。
・display:flexは、フレックスボックスにする部分の親要素(ここではulタグ)にしか設定しないでください。

投稿2020/05/23 00:36

編集2020/05/23 00:37

Yorrie

総合スコア354

退会済みユーザー

2020/05/23 04:05

回答いただきありがとうございます！ ulが抜けてました。すみません！

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

ベストアンサー

text-align: center;ではなく、justify-content: center;を使ってください。

CSS
1li a {
2  display: flex;
3  align-items: center; /* 上下の中央配置 */
4  
5  /* text-align: center; */ /* テキストの中央寄せ */
6  justify-content: center; /* 左右の中央配置 */
7}