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

Question

最近我一直在使用 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-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

不确定您要实现的目标。你是想让它垂直居中还是水平居中？这是我的回答：

首先，您必须记住 tailwindcss，就像许多框架一样“移动优先”。这意味着样式从小屏幕开始应用；除此之外，您必须指定。例如，假设您有一个 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

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

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

html

css

tailwind-css