实现导航内容不会使 ul 元素居中

Question

我正在尝试使用居中选项使导航内容居中

So it will look like this.

但是它对 ul 属性不起作用。

Ends up looking like this instead.

我的代码：

...
        <div class="nav-content center" style="background-color: black">
            <ul class="tabs tabs-transparent">
                <li class="tab"><a href="">Test 1</a></li>
                <li class="tab"><a href="">Test 2</a></li>
            </ul>
        </div>
    </nav>

解决方案：

mdubus 的答案是正确的，但它需要在 ul 元素而不是 div 中才能使用 Materialize。

Answer 1

在您的 div nav-content center 上，只需添加一个 display:flex; justify-content:center;。那应该可以解决问题；）

Answer 2

我不熟悉 materielize，您可以使用 css 来实现，方法是将父元素设置为：flex 和 justifiy-content: center；或者简单地通过设置 .nav-content{ text-align: center; }

实现导航内容不会使 ul 元素居中

Materialize nav content won't center ul element

html

css

nav

materialize

bootstrap-4