css - 居中引导导航栏

Question

我是 CSS 新手。我想将品牌标志和导航栏中的链接居中。

HTML

    <nav class="navbar navbar-expand-md center">
    <a class="navbar-brand" href="http://www.dimsum.dk" target="_blank">
        <img src={% static 'media/HIDDEN DIMSUM logo final.png'%} width="100" alt="">
    </a>

    <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="main-navigation">
        <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Book Table</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="http://www.dimsumbox.dk" target="_blank">
            Order Dimsum Box</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="http://www.dimsumshop.dk" target="_blank">
            Order Takeaway</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#" target="_blank">
            About</a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#" target="_blank">
            Contact</a>
        </li>

        </ul>
    </div>
</nav>

CSS

.navbar {
    background: #d48498;
}

.nav-link {
    color: black;
    font-size: 24px;
    font-weight: bold;
}

.navbar.center .nav-item {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

这就是导航栏现在的样子

我想让徽标居中，并且出现在新行中的链接也居中，所以看起来像

                                         Logo
                         Link 1      Link 2    Link 3   Link 4

---

我曾尝试在 css 中证明中心，但它不起作用。

Answer 1

将此位添加到您的 CSS

    @media (min-width: 768px) {
       .navbar {
         flex-flow: wrap;
       }

       .navbar-brand {
         width: 100%;
         text-align: center;
       }

       .navbar-brand img {
         height: 50px; /*Set a logo size*/
         width: auto;
       }

       .navbar-collapse {
         justify-content: center;
       }
    }

Answer 2

在 css 中使用对齐内容：居中和显示：flex

  display: flex;
  justify-content: center;

供参考https://www.w3schools.com/cssref/css3_pr_justify-content.asp

Answer 3

在 bootstrap.css 之后添加这个 css：

.navbar-brand {
    display: flex;
    width: 100%;
    justify-content: center !important;
}
.navbar {
    flex-wrap: wrap !important;
    justify-content: center !important;
}
.navbar-nav{
    width:100%;
    justify-content:center !important
}