如何仅在小型设备上使用尾风CSS在我的导航栏上对项目进行居中

Question

最近，我一直在使用Tailwind为我的站点创建一个基本的导航条。我有它，所以一个按钮消失，当你在一个小的设备，但我也希望有项目的中心，当我使用它在一个小的设备。这是我的密码。

    <!-- navbar goes here -->
    <nav class="bg-gray-100">
        <div class="max-w-6xl mx-auto px-8" >
            <div class="flex justify-between">  
                <div class="flex space-x-4 sd:items-center">
                    <!-- logo -->
                        <div>
                            <a href="#" class="flex items-center py-4 px-2 text-gray-700">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-green-400" 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 class="flex items-center space-x-1">
                            <a href="" class="py-2 px-3 text-gray-700 rounded hover:bg-blue-400">Bedwars</a>
                            <a href="" class="py-2 px-3 text-gray-700 rounded hover:bg-blue-400">Skywars</a>
                            <a href="" class="py-2 px-3 text-gray-700 rounded hover:bg-blue-400">Bazaar</a>
                        </div>
                </div>
                    <!-- secondary nav -->
                    <div class="hidden md:flex flex items-center space-x-1">
                        <a class="py-5 px-3">
                            <a href="nabartest.html">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 rounded hover:text-green-400" 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>

在第5行，您可以看到我通过使用sd:items-center所做的尝试。如果有人有任何解决方案或需要更多的信息，请告诉我！

谢谢!

Answer 1

不知道你想达到什么目的。你是想把它垂直地还是水平地集中起来？我的回答是：

首先，您必须记住，跟许多框架一样，这里也有“移动优先”。这意味着从小屏幕开始应用样式；除此之外，您必须指定。例如，假设您有一个div，它只在小型设备上有一个红色的背景，而在其余的屏幕上应该是绿色的，下面是您需要做的事情：<div class="bg-red md:bg-green"></div>。这将将bg-green应用于设备大小为md及以上的设备，但小屏幕仍将使用bg-red。

尽管如此，如果您希望将导航条垂直对齐，则必须将sd:items-center更改为第5行中的items-center。

但是，如果您希望将导航条项水平对齐(我认为这就是您想要实现的)，则需要将第4行中的justify-between更改为justify-center md:justify-between。您可以删除sd:items-center，因为它没有任何意义。尾风中不存在名为sd:的断点。

看看这个：https://play.tailwindcss.com/cv0Hw6QcWz?size=746x720