Centering List Vertically in TailwindCSS Responsive Layout

June 15, 2022

I am trying to design a responsive <nav> element in TailwindCSS. I have the header almost how I want it, but am struggling to center the menu elements when the screen size becomes small. I would like for the elements (including the separating "•" character) to be centered vertically when the screen size is small, and centered horizontally in the header when the screen size is big. As you can see in the code sandbox below, the elements are centered horizontally when the screen size is big, but are left-aligned when the screen size is small. I am not sure how to fix this. The items-center and justify-center utility classes are not behaving as expected (or I’m not using them right), and I’ve had no luck with using flex-col either.

I’d appreciate any help. Please note that each of my menu items is also a dropdown menu, but for clarity I have omitted the dropdown contents in the code sandbox below.

<html lang="en">

    <head>
      <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" />

    </head>

    <body class="bg-gray-400 font-sans leading-normal tracking-normal">

      <nav class="flex items-center justify-between flex-wrap bg-gray-800 p-6 fixed w-full z-10 top-0">
        <div class="flex items-center flex-shrink-0 text-white mr-6">
          <a class="text-white no-underline hover:text-white hover:no-underline" href="#">
            <span class="text-2xl pl-2">Brand</span>
          </a>
        </div>

        <div class="block lg:hidden">
          <button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-white hover:border-white">
            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
            </svg>
          </button>
        </div>

        <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block pt-6 lg:pt-0" id="nav-content">
          <ul class="list-reset lg:flex justify-center flex-1 items-center">
            <div class="dropdown dropdown-hover">
              <a href="#" class="mx-2 text-white text-2xl justify-center">One</a>
            </div>
            <p class="mx-2 text-white text-2xl">•</p>
            <div class="dropdown dropdown-hover">
              <a href="#" class="mx-2 text-white text-2xl">Two</a>
            </div>
          </ul>
        </div>
      </nav>
      <script>
        //Javascript to toggle the menu
        document.getElementById('nav-toggle').onclick = function() {
          document.getElementById("nav-content").classList.toggle("hidden");
        }
      </script>
    </body>

    </html>

>Solution :

You should modify ul class names with flex directions

flex flex-col lg:flex-row

Above lg size: flexbox will be rows
Below lg size: flexbox will be columns

Note that you should be aware of the class name order from left to right.

<html lang="en">

    <head>
      <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" />

    </head>

    <body class="bg-gray-400 font-sans leading-normal tracking-normal">

      <nav class="flex items-center justify-between flex-wrap bg-gray-800 p-6 fixed w-full z-10 top-0">
        <div class="flex items-center flex-shrink-0 text-white mr-6">
          <a class="text-white no-underline hover:text-white hover:no-underline" href="#">
            <span class="text-2xl pl-2">Brand</span>
          </a>
        </div>

        <div class="block lg:hidden">
          <button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-white hover:border-white">
            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
            </svg>
          </button>
        </div>

        <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block pt-6 lg:pt-0" id="nav-content">
          <ul class="list-reset flex flex-col lg:flex-row justify-center flex-1 items-center">
            <div class="dropdown dropdown-hover">
              <a href="#" class="mx-2 text-white text-2xl justify-center">One</a>
            </div>
            <p class="mx-2 text-white text-2xl">•</p>
            <div class="dropdown dropdown-hover">
              <a href="#" class="mx-2 text-white text-2xl">Two</a>
            </div>
          </ul>
        </div>
      </nav>
      <script>
        //Javascript to toggle the menu
        document.getElementById('nav-toggle').onclick = function() {
          document.getElementById("nav-content").classList.toggle("hidden");
        }
      </script>
    </body>

    </html>