css: how to vertically center text with li element when flexbox is used?

I have the following menubar:

<ul>
    <li><a>A</a></li>
    <li><a>B</a></li>
    <li><a>C</a></li>
</ul>

And the following CSS:

ul { display: flex; flex-direction: row; height: 100%; }
ul li { flex: 1, auto; text-align: center; }
ul li a:hover { cursor: pointer; }

I do this so that the padding-left between li is the same. But now it is difficult to vertically center the text. Is there any suggestion?

I have tried to add line-height: 2 in li. But I don’t think it is the solution.

Thank you.


Source: html

Leave a Reply