css - Bootstrap css 图像中心和导航栏与品牌内联折叠

Question

我的网站上有以下导航栏。在全屏上一切正常，但是当屏幕尺寸减小到最大宽度 992px 时，我试图将屏幕上的 Logo 居中并移动折叠导航栏以与 Logo 内联。

    <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">
        <img class="darklogo" href="#page-top" width="30%"  src="img/redlogo.png" />
        <img class="whitelogo" href="#page-top" width="30%" border="0" alt="null" src="img/whitelogo.png" />
    </a>
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger selected" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#portfolio">Projects</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>




  #mainNav .darklogo {
    display: none;
}


#mainNav .whitelogo {
    display: block;
}



#mainNav.navbar-shrink .darklogo {
    display: block;
}

#mainNav.navbar-shrink .whitelogo {
    display: none;
}


@media (max-width: 992px) {
    #mainNav .whitelogo {
        display: none;
    }

    #mainNav .darklogo {
       width: 50%;
       display: block;
    }
}

我尝试添加:align-content = center，但没有用。还尝试证明 content = center.这也行不通。

导航栏折叠也在导航栏品牌( Logo )下方，是否可以将其对齐到一行？

Answer 1

https://jsfiddle.net/xmcfn6r0/8/

如果您更改 .darklogo 的 width，您还需要更改它的 left 值。

@media (max-width: 992px) {
    #mainNav .whitelogo {
        display: none;
    }

    #mainNav .navbar-brand {
        position: absolute;
        left: 50%;
    }

    #mainNav .darklogo {
        width: 50%;
        position: relative; 
        left: -25%;
        display: block;
    }
}