Search code examples
htmlcssbootstrap-4materializenav

Materialize nav content won't center ul element

I'm trying to center nav-content using center option

So it will look like this.

However it doesn't work on the ul attribute.

Ends up looking like this instead.

My code:

...
        <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>

Solution:

mdubus' answer is correct but it needs to be in the ul element instead of the div for it to work using Materialize.

Solution

  • On your div nav-content center, just add a display:flex; justify-content:center;. That should do the trick ;)