在 Mobile Bootstrap 上对齐整个 Div 资源中心

Question

我使用 Bootstrap 4.5.

编写了一些 'custom' 导航栏

基本上，它是两个 columns/grids，右栏中有一个徽标，另一栏中有一个用作导航栏的列表。

我对它在 laptop/computer/tablet 等设备上的外观非常满意：

但它在移动设备上看起来很糟糕，因为徽标左对齐（继承，实际上没有使用任何东西将其左对齐）并且列表右对齐 (class="... text-right ...")。

我想使徽标和列表在较小的移动设备上居中对齐。我已经尝试了一些事情，比如在 css 中使用 @media 属性和 float:center;，我能想到的唯一其他方法是制作正常的导航栏 hidden/invisible 在移动设备上并添加一个仅在移动设备上可见的新链接，但我真的不想这样做，因为这意味着我必须向列表添加两次链接等。

我还尝试仅将列表中心与此文档对齐：https://getbootstrap.com/docs/4.0/utilities/text/，但没有成功。

我当前的导航栏是：

        <div class="topsection">
            <div class="container">
                <div class="row">
                    <div class="col-sm">
                         <a href="/"><img class="img-responsive" src="https://cdn.example.com/img/logo2.png" height="50px"></a>
                    </div>
                    <div class="col-sm align-baseline">
                        <p><ul class="list-inline text-right font1">
                            <li class="list-inline-item active-nb"><a href="/">Home</a></li>
                            <li class="list-inline-item"><a href="/projects">Projects</a></li>
                            <li class="list-inline-item"><a href="/mywork">My Work</a></li>
                            <li class="list-inline-item"><a href="/feed">Feed</a></li>
                        </ul></p>
                    </div>
                </div>
            </div>
        </div>
        <hr class="main">

（属性 main 和 topsection 并不重要，它们只是设置事物背景的样式等）

目前，在手机上看起来是这样的：

Answer 1

.your-class{
display:flex;
place-content:center;
}

应该可以使用基本的 css。

Answer 2

使用 Bootstrap 实用程序类。对齐已经响应...

<div class="topsection">
    <div class="container">
        <div class="row justify-sm-content-between justify-content-center">
            <div class="col-sm col-auto">
                <a href="/"><img class="img-responsive" src="//placehold.it/120x50" height="50px"></a>
            </div>
            <div class="col-sm">
                <ul class="list-inline text-sm-right text-center py-2 font1">
                    <li class="list-inline-item active-nb"><a href="/">Home</a></li>
                    <li class="list-inline-item"><a href="/projects">Projects</a></li>
                    <li class="list-inline-item"><a href="/mywork">My Work</a></li>
                    <li class="list-inline-item"><a href="/feed">Feed</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Demo

在 Mobile Bootstrap 上对齐整个 Div 资源中心

Align Entire Div Content Center on Mobile Boostrap

html

css

navbar

responsive-design

bootstrap-4