如何在 div 中垂直对齐导航栏？答案

【问题标题】：How do you vertically align a navbar within a div?如何在 div 中垂直对齐导航栏？
【发布时间】：2018-09-30 11:02:43
【问题描述】：

所以我看到了一些其他帖子，表明您必须有一个带有 h-100 的容器才能将项目与 align-self 类对齐，但是我遇到了在 div 底部对齐导航栏的问题。如果我将导航栏粘贴在另一个容器中并排它可以工作，但是导航栏不是主容器的全宽。这是我所拥有的：

<div class="container-fluid h-100 body-content">
    <nav class="navbar navbar-light bg-light align-self-lg-end">
        <a class="navbar-brand" href="#">Navbar</a>
    </nav>
    <div class="logo_banner">
    </div>
    <footer>
        <p>Footer</p>
    </footer>
</div>

谢谢，感谢所有帮助。

【问题讨论】：

container-fluid 带有默认的 padding-left:15px; 和 padding-right:15px ，要使您的中殿全宽，您需要摆脱它们：.container-fluid{ padding-left:0; padding-right:0;}

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

尝试使用 .align-middle 类。

https://getbootstrap.com/docs/4.0/utilities/vertical-align/

【讨论】：