Bootstrap css image center и navbar свернуты в линию с брендом

Question

У меня есть нижеуказанная навигационная панель на моем сайте.На полноэкранном режиме все работает нормально, однако, когда размеры экрана уменьшаются до максимальной ширины 992 пикселя, я пытаюсь отцентрировать логотип на экране и переместить навигационную панель свертывания в соответствие с логотипом.

    <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, это не сработало.Также попытался оправдать содержание = центр.Это тоже не работает.

Также развал навигационной панели происходит под маркой navbar (логотип), возможно ли выровнять это по одной строке?

Answer 1

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

Если вы измените width из .darklogo, вам также нужно изменить 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;
    }
}