垂直对齐标题中的内容答案

【问题标题】：Vertically Align Content in Header垂直对齐标题中的内容
【发布时间】：2018-03-16 11:00:25
【问题描述】：

您好，我正在尝试在我的网站上完成一些工作，我是第一次使用 bootstrap 4，但遇到了一点困难。

这是我的代码：

<header class="header container-fluid">
    <div class="row justify-content-between d-flex flex-row align-items-center">

        <img class="logo" src="./images/logo.png" alt="Example Company" title="Example Company" />

        <ul class="menu align-self-center">
            <li><a href="{{ url("home") }}">Home</a></li>
            <li><a href="{{ url("home") }}">About us</a></li>
            <li><a href="{{ url("home") }}">How it works</a></li>
            <li><a href="{{ url("home") }}">Contact us</a></li>
        </ul>

    </div>
</header>

现在我希望徽标左对齐菜单链接右对齐但是两者都应该垂直居中，如下所示：

【问题讨论】：

无缘无故投反对票？ ://
我不是反对者，但您看到类似的问题了吗？ stackoverflow.com/questions/41513463/…
是的，我做到了，我已经能够将我的内容左右对齐，我想要这样做并垂直对齐它，但我似乎无法做到正确。
"现在我希望徽标向左对齐，菜单链接向右对齐，但两者都应垂直居中，如下所示："

标签： bootstrap-4

【解决方案1】：

检查所有对齐方式

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Left</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="//codeply.com">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">Navbar 2</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

【讨论】：

感谢您的宝贵时间，希望对我在代码中做错了什么以及您为使其符合我想要的方式而进行的更改进行了一些解释。