时间戳

首页 > 解决方案 > 在不使用填充和边距的情况下垂直对齐拉伸的 flex

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

问题描述

我正在使用带有 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>

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

标签： cssbootstrap-4flexbox

解决方案

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

例子：

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

推荐阅读