Question

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

此当前代码可实现延伸边框的技巧，但是flexbox中的文本无法集中。

Answer 1

如何将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。

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

1 个答案: