リスト要素全体をリンク指定した時の縦のセンタリングができません。

すみません、設定しても希望した表示にならずお力をお貸願います。

タイトルのままなのですが、liではなくともdivやspanでもよいのですが、親要素いっぱいを子要素のリンク対象にした場合の子要素の配置がうまくできず困っております。
具体的には以下の感じなのですが…。

CSS
1        li{
2            width:200px;
3            height:50px;
4            background: plum;
5            margin-bottom: 30px;
6            list-style: none;
7            /*padding-left:20px; ここで指定するとずれるのでNG*/
8            display: flex;
9            align-items: center;
10        }
11          li a {
12              padding-left:20px;
13              display: block;
14              width:100%;
15              height:100%;
16              background: tomato;
17          }
18    </style>

HTML
1<ul>
2    <li><a href="">テキスト</a></li>
3    <li><a href="">テキスト</a></li>
4    <li><a href="">テキスト</a></li>
5    <li><a href="">テキスト</a></li>
6</ul>

行いたいことは、li内のテキストの縦方向のセンタリングです。
横方向の20pxpはli a に対してのadding-left:20px;指定でできたのですが
縦方向が何か定義するとどこかがずれてしまいます。

display: flex;はdisplay: block;の前の名残りです。
display: block;　を付けたら無効になってしまいました。

色々と調べたのですが、子要素全体の定義はあるのですが、センター配置絡みの情報がうまく見つからず…。
すみません、宜しくお願いいたします。

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

回答1件

ベストアンサー

下記でどうですか。

css
1li a {
2/*  padding-left:20px;*/
3 display: block;
4 width:100%;
5 height:100%;
6 background: tomato;
7 text-align: center; /*水平中央揃え*/
8 line-height: 50px;  /*親要素の高さと同じに*/
9}

文字が増えて折り返しが発生する場合には対応するには、
まずはHTMLでaリンク内のテキストを囲む必要があると思います。

html
1<ul>
2    <li><a href=""><span>テキスト</span></a></li>
3    <li><a href=""><span>テキスト</span></a></li>
4    <li><a href=""><span>テキスト テキスト テキスト</span></a></li>
5    <li><a href=""><span>テキスト テキスト テキスト テキスト<span></a></li>
6</ul>

そうすればCSS Flexboxで簡単に中央寄せできます。

css
1li a {
2  display: block;
3  width:100%;
4  height:100%;
5  background: tomato;
6  text-align: center; /*水平中央揃え*/
7  display: flex;
8  justify-content: center;
9  align-items: center;
10}