Centering List Vertically in TailwindCSS Responsive Layout-CodePudding

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/[email protected]/dist/tailwind.min.css" />

    </head>

    <body >

      <nav >
        <div >
          <a  href="#">
            <span >Brand</span>
          </a>
        </div>

        <div >
          <button id="nav-toggle" >
            <svg  viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
            </svg>
          </button>
        </div>

        <div  id="nav-content">
          <ul >
            <div >
              <a href="#" >One</a>
            </div>
            <p >•</p>
            <div >
              <a href="#" >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>

CodePudding user response：

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/[email protected]/dist/tailwind.min.css" />

    </head>

    <body >

      <nav >
        <div >
          <a  href="#">
            <span >Brand</span>
          </a>
        </div>

        <div >
          <button id="nav-toggle" >
            <svg  viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
            </svg>
          </button>
        </div>

        <div  id="nav-content">
          <ul >
            <div >
              <a href="#" >One</a>
            </div>
            <p >•</p>
            <div >
              <a href="#" >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>