How Do I Center Items on My Navbar Only on Small Devices Using Tailwind CSS-CodePudding

Recently I have been using Tailwind CSS to create a basic navbar for my site. I have it so a button disappears when you are on a small device but I would also like to have the item's centre when I use it on a small device. Here is the code that I have.

    <!-- navbar goes here -->
    <nav >
        <div  >
            <div >  
                <div >
                    <!-- logo -->
                        <div>
                            <a href="#" >
                                <svg xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                                </svg>
                                <span>JRRNZ's Stats</span>
                            </a>
                        </div>
                    <!-- primary nav -->
                        <div >
                            <a href="" >Bedwars</a>
                            <a href="" >Skywars</a>
                            <a href="" >Bazaar</a>
                        </div>
                </div>
                    <!-- secondary nav -->
                    <div >
                        <a >
                            <a href="nabartest.html">
                                <svg xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                </svg>
                            </a>
                        </a>
                    </div>
            </div>
        </div>
    </nav>

On line 5 you can see the attempt I have made by using sd:items-center. If anyone has any solutions or needs any more information please let me know!

Thanks!

CodePudding user response：

Not sure what you're trying to achieve. Are you trying to center it vertically or horizontally? Here's my answer for either:

First things first, you have to keep in mind that tailwindcss, like many frameworks out there is "mobile-first". Meaning the styles get applied starting with small screens; anything beyond that, you'll have to specify. Eg, lets say you have a div which should have a background of red only on small devices but green on the rest of the screens, here's what you'll need to do: <div ></div>. This will apply bg-green to device sizes md and above but small screen will still use bg-red.

With that said, if you're looking to center align the navbar vertically you have to change the sd:items-center to items-center in line 5.

However, if you're looking to center align the navbar items horizontally (which I think is what you're trying to achieve), you'll need to change the justify-between in line 4 to justify-center md:justify-between. You can remove sd:items-center as it has no meaning. No breakpoint named sd: exists in tailwindcss.

Check this out: https://play.tailwindcss.com/cv0Hw6QcWz?size=746x720