在不使用填充和边距的情况下垂直对齐拉伸的 flex

Question

I'm using a flexbox with align-items-stretch as I needed the borders to be reaching on both top and bottom. Not allowing the usage of margins and paddings, how can I come about vertically aligning the text within flex without facing any property conflict?

I've tried using the align-items-stretch and within the ul li added a align-middle class but it doesn't seem to do anything seeing that the property clashes.

<div class="navbar-collapse collapse align-items-stretch" id="navbarCollapse" style="">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item active">Home</li>
        <li class="nav-item">About Us</li>
        <li class="nav-item ">Services</li>
    </ul>
</div>

This current code does the trick of stretching my borders but the text within the flexbox could not be centralized.

Answer 1

How about adding the line-height with value the same the height of the .nav-item ?

Example:

 .navbar-nav { display: flex; justify-content: center; } .nav-item { border: 1px solid pink; height: 3rem; line-height: 3rem; text-align: center; } ul { list-style: none; margin: 0; padding: 0; }

 <div class="navbar-collapse collapse align-items-stretch" id="navbarCollapse" style=""> <ul class="navbar-nav ml-auto"> <li class="nav-item active">Home</li> <li class="nav-item">About Us</li> <li class="nav-item ">Services</li> </ul> </div>

And here's the fiddle as well: https://jsfiddle.net/jutvsw26/

For more detailed answer could you please add some CSS that you're currently using.