flexを使った時に、要素の高さをそのままに文字を中央揃えにしたい。

Question

縦線の長さはそのままで、
文字を横に中央揃えしたいのですが、どうしたらよいでしょうか？

■HTML

          <li><a href="">aaa<br>aaa</a></li>
          <li><a href="">bb</a></li>
          <li><a href="">cccc</a></li>
          <li><a href="">dddd</a></li>
        </ul>
コード

■CSS

ul{
			display: flex;

			li{
				border-right: solid 1px green;
				display: block;
				padding: 0 12px;
				vertical-align: middle;

				&:last-child{
					border-right: none;
				}
				a{
					text-decoration: underline;
				}
			}
		}

■実現したい見た目

いろいろ試して見たのですが、縦線の長さをそのままに、
文字を中央揃えすることがなかなかできません。

よろしくお願いいたします。

Comments

[Lhankor_Mhy]

「横に中央揃え」とのことですが、すでに中央揃えになっているように思えます。
ご希望のレイアウトを画像などでお示しいただいた方がいいかもしれません。

[Lhankor_Mhy]

もしかして、「横に中央揃え」とは全体をスクリーンに対して中央揃えする、ということですか？

[Lhankor_Mhy]

もしかして、縦に中央揃え、とお間違いですか？

[jarinko-girl]

情報不足でした。
「■実現したい見た目」を質問に追加いたしました。

[Lhankor_Mhy]

質問のご編集拝読。

問題を把握しました。

Answer 1

これでいかがでしょうか。

            li{
                border-right: solid 1px green;
                display: block;
                padding: 0 12px;
                vertical-align: middle;
/* 以下を追加 */
                display: flex;
                align-items: center;

Comments

[jarinko-girl]

ありがとうございます！
大変助かりましたm(_ _)m