最近我一直在使用 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 所做的嘗試。如果有人有任何解決方案或需要更多資訊，請告訴我！
謝謝！
uj5u.com熱心網友回復：
不確定你想要達到的目標。你是想垂直居中還是水平居中？這是我對兩者的回答：
首先，您必須記住，tailwindcss，就像許多框架一樣，是“移動優先”的。這意味著從小螢屏開始應用樣式；除此之外的任何事情，您都必須指定。例如，假設你有哪些應該有紅色只在小型設備上，但綠色的螢屏其余部分的背景股利，這里就是你需要做的：<div ></div>。這將適用bg-green于設備尺寸md及以上，但小螢屏仍將使用bg-red.
隨著中說，如果你正在尋找居中對齊導航欄垂直，你必須改變sd:items-center到items-center第5行。
但是，如果您希望將導航欄專案水平居中對齊（我認為這就是您要實作的目標），則需要將justify-between第 4 行中的justify-center md:justify-between. 您可以洗掉，sd:items-center因為它沒有意義。sd:tailwindcss 中不存在命名的斷點。
看看這個：https : //play.tai??lwindcss.com/cv0Hw6QcWz?size=746x720
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/379894.html