在 TailwindCSS 响应式布局中垂直居中列表
[英]Centering List Vertically in TailwindCSS Responsive Layout
问题描述
I am trying to design a responsive <nav> element in TailwindCSS.
我正在尝试在 TailwindCSS 中设计响应式<nav>元素。 I have the header almost how I want it, but am struggling to center the menu elements when the screen size becomes small.我几乎拥有我想要的 header，但是当屏幕尺寸变小时，我很难将菜单元素居中。 I would like for the elements (including the separating "•" character) to be centered vertically when the screen size is small, and centered horizontally in the header when the screen size is big.我希望元素（包括分隔的“•”字符）在屏幕尺寸较小时垂直居中，而在屏幕尺寸较大时在 header 中水平居中。 As you can see in the code sandbox below, the elements are centered horizontally when the screen size is big, but are left-aligned when the screen size is small.正如您在下面的代码沙箱中看到的，当屏幕尺寸较大时，元素水平居中，但当屏幕尺寸较小时，元素左对齐。 I am not sure how to fix this.我不确定如何解决这个问题。 The items-center and justify-center utility classes are not behaving as expected (or I'm not using them right), and I've had no luck with using flex-col either. items-center和justify-center实用程序类没有按预期运行（或者我没有正确使用它们），而且我也没有成功使用flex-col 。
I'd appreciate any help.我将不胜感激任何帮助。 Please note that each of my menu items is also a dropdown menu, but for clarity I have omitted the dropdown contents in the code sandbox below.请注意，我的每个菜单项也是一个下拉菜单，但为了清楚起见，我在下面的代码沙箱中省略了下拉菜单内容。
<html lang="en"> <head> <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" /> </head> <body class="bg-gray-400 font-sans leading-normal tracking-normal"> <nav class="flex items-center justify-between flex-wrap bg-gray-800 p-6 fixed w-full z-10 top-0"> <div class="flex items-center flex-shrink-0 text-white mr-6"> <a class="text-white no-underline hover:text-white hover:no-underline" href="#"> <span class="text-2xl pl-2">Brand</span> </a> </div> <div class="block lg:hidden"> <button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-white hover:border-white"> <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /> </svg> </button> </div> <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block pt-6 lg:pt-0" id="nav-content"> <ul class="list-reset lg:flex justify-center flex-1 items-center"> <div class="dropdown dropdown-hover"> <a href="#" class="mx-2 text-white text-2xl justify-center">One</a> </div> <p class="mx-2 text-white text-2xl">•</p> <div class="dropdown dropdown-hover"> <a href="#" class="mx-2 text-white text-2xl">Two</a> </div> </ul> </div> </nav> <script> //Javascript to toggle the menu document.getElementById('nav-toggle').onclick = function() { document.getElementById("nav-content").classList.toggle("hidden"); } </script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2022-06-15 02:29:50
You should modify ul class names with flex directions您应该使用 flex 方向修改ul class 名称
flex flex-col lg:flex-row
- Above
lgsize: flexbox will be rows以上lg大小：flexbox 将是行 - Below
lgsize: flexbox will be columns低于lg大小：flexbox 将是列
Note that you should be aware of the class name order from left to right.请注意，您应该知道 class 从左到右的名称顺序。
<html lang="en"> <head> <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" /> </head> <body class="bg-gray-400 font-sans leading-normal tracking-normal"> <nav class="flex items-center justify-between flex-wrap bg-gray-800 p-6 fixed w-full z-10 top-0"> <div class="flex items-center flex-shrink-0 text-white mr-6"> <a class="text-white no-underline hover:text-white hover:no-underline" href="#"> <span class="text-2xl pl-2">Brand</span> </a> </div> <div class="block lg:hidden"> <button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-white hover:border-white"> <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /> </svg> </button> </div> <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block pt-6 lg:pt-0" id="nav-content"> <ul class="list-reset flex flex-col lg:flex-row justify-center flex-1 items-center"> <div class="dropdown dropdown-hover"> <a href="#" class="mx-2 text-white text-2xl justify-center">One</a> </div> <p class="mx-2 text-white text-2xl">•</p> <div class="dropdown dropdown-hover"> <a href="#" class="mx-2 text-white text-2xl">Two</a> </div> </ul> </div> </nav> <script> //Javascript to toggle the menu document.getElementById('nav-toggle').onclick = function() { document.getElementById("nav-content").classList.toggle("hidden"); } </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.