aタグの文章を上下中央ぞろえにしたい。

Question

前提・実現したいこと

aタグの文章を上下中央ぞろえにしたい。

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

現在

「お品書き」が上にずれております。
これを白い背景に対して、上下中央ぞろえにしたいです。

該当のソースコード

<li class="global-nav-2" style="background-image: url(img/1.jpg);"><a href="#">お品書き</a></li>

.global-nav li {
  width: 20%;
  height: 100px;
  background: center center / cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.global-nav a {
  width: 100%;
  height: 40%;
  color: #000;
  background-color: rgb(255,255,255,0.6);
  font-size: 1.6rem;
}

試したこと

.global-nav li　に色々指定してみたものの、上手くいかず...
教えて頂けると、大変助かります。

Comments

[gas.engine]

class="global-nav-2"
クラスがこうなっていますが修正してみてください。

[itagagaki]

CSSにHTMLで指定しているglobal-nav-2が無いですよ。

[genjiro]

失礼しました。
コードを抜粋しています。
liタグは、nav（class=global-nav)を親要素に持っています。
この記述だとそう受け取られますね。
申し訳ありません。

Answer 1

以下を追加してはどうでしょうか。

.global-nav a {
  display: flex;
  justify-content: center;
  align-items: center;
}

Comments

[genjiro]

できました！！
そうか。aタグにもflexは指定できますよね。
見落としておりました。
大変助かりました！ありがとうございます！！

[Lhankor_Mhy]

お役に立てたようでなによりです。