Bootstrap 4导航栏，带有文本的居中blurb

Question

我以为这很容易，但是7小时后，不。

我正在尝试将navbar-brand定位在左侧，文本的中部对齐（始终可见），而navbar-collapse定位在右侧。

问题是总是可见居中的文本-我尝试的所有操作都会将文本强制换行。

    <div class="navbar navbar-expand-lg justify-content-center">
        <div class="container">
            <a href="/" class="navbar-brand d-flex w-50 mr-auto">
                <h1>
                    <img src="/img/xxx.svg" width="36" height="36" alt="foobar">
                    Foobar
                </h1>
            </a>

            <need a container here to center this text>CENTERED BLURB OF TEXT</need>

            <button type="button" class="navbar-toggler bg-primary" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="valign-image-text">
                    MENU
                    <img src="/img/menu-light.svg" width="30" height="30" alt="" class="ml-2">
                </span>
            </button>

            <div class="navbar-collapse collapse w-100" id="navbar-collapse">
                <!-- <ul class="navbar-nav w-100 justify-content-center"> -->
                    <!-- <li>This centered blurb of text collapses, not what I want</li> -->
                <!-- </ul> -->

                <ul class="navbar-nav w-100 ml-auto justify-content-end">
                    <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                    <li class="nav-item"><a class="btn btn-gray ml-0 ml-lg-4" href="#">Downloads</a></li>
                </ul>
            </div>
        </div>
    </div>

不要在SO上发布指向其他Bootstrap 4居中帮助程序的链接，因为它们不涵盖了这一点。

Answer 1

.abs-center-x {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
}

https://codeply.com/p/28xqoMNWGY

注意，在“下载”的左边距处，居中文本
确实在断点之前重叠。