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

【问题标题】：Vertically aligning a stretched flex without using paddings and margin在不使用填充和边距的情况下垂直对齐拉伸的 flex
【发布时间】：2019-04-25 20:46:20
【问题描述】：

我正在使用带有 align-items-stretch 的 flexbox，因为我需要在顶部和底部都达到边界。不允许使用边距和填充，我怎样才能在 flex 中垂直对齐文本而不会遇到任何属性冲突？

我尝试使用 align-items-stretch 并在 ul li 中添加了一个 align-middle 类，但看到属性冲突似乎没有任何作用。

<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>

当前的代码可以拉伸我的边框，但弹性框中的文本无法集中。

【问题讨论】：

您可以添加一个盒子阴影来显示导航项目周围的边框，如下所示： .navbar-nav li { box-shadow: 0px 0px 1px 0px red; }
使用li.nav-item { display: flex; align-items: center; }

标签： css bootstrap-4 flexbox

【解决方案1】：

添加与.nav-item 的高度相同的line-height 怎么样？

例子：

.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>

这也是小提琴：https://jsfiddle.net/jutvsw26/

如需更详细的答案，请添加一些您当前正在使用的 CSS。

【讨论】：