如何使用 Tailwind CSS 仅在小型设备上将导航栏上的项目居中

Posted 2023-03-07

【中文标题】如何使用 Tailwind CSS 仅在小型设备上将导航栏上的项目居中

【英文标题】：How Do I Center Items on My Navbar Only on Small Devices Using Tailwind CSS

【发布时间】：2022-01-16 15:17:45

【问题描述】：

最近我一直在使用 Tailwind CSS 为我的网站创建一个基本的导航栏。我有它，所以当您在小型设备上时按钮会消失，但是当我在小型设备上使用它时，我也想拥有该项目的中心。这是我的代码。

    <!-- 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- 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- 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 所做的尝试。如果有人有任何解决方案或需要更多信息，请告诉我！

谢谢！

【参考方案1】：

不确定您要达到的目标。您是要垂直居中还是水平居中？这是我的答案：

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

话虽如此，如果您希望将导航栏垂直居中对齐，则必须在第 5 行将 sd:items-center 更改为 items-center。

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

检查一下： https://play.tailwindcss.com/cv0Hw6QcWz?size=746x720