项目中心在顺风nextjs中不起作用

Question

"use client";

import Link from 'next/link';
import { usePathname } from 'next/navigation';

const Navbar = () => {
    const pathname = usePathname();
  return (
    <nav className='min-h-10 h-12 bg-black px-24'>
        <div className='flex justify-around items-center'>
            <h1 className='font-bold text-white text-2xl'>Profile</h1>
            <ul className='flex justify-center items-center text-gray-400 gap-6'>
                <li>
                    <Link className={`${pathname === '/' ? 'active' : ''}`} href={'/'}>
                        Home
                    </Link>
                </li>
                <li>
                    <Link className={`${pathname === '/more' ? 'active' : ''}`} href={'/more'}>
                        More
                    </Link>
                </li>
            </ul>
        </div>
     
    </nav>
  )
}

export default Navbar;

即使我使用了 items-center，导航栏项目也没有沿 y 轴对齐。我不确定为什么会发生这种情况任何人都可以提供帮助。我被困在这里了。

Answer 1

这是因为您没有将

flexbox

css 应用到容器元素，在您的情况下为

nav

。将

items-center

添加到

nav

元素后，它将起作用。请尝试使用以下代码库。

"use client";

import Link from 'next/link';
import { usePathname } from 'next/navigation';

const Navbar = () => {
    const pathname = usePathname();
  return (
    <nav className='flex justify-around items-center min-h-10 h-12 bg-black px-24'>
        <h1 className='font-bold text-white text-2xl'>Profile</h1>
        <ul className='flex text-gray-400 gap-6'>
            <li>
                <Link className={`${pathname === '/' ? 'active' : ''}`} href={'/'}>
                    Home
                </Link>
            </li>
            <li>
                <Link className={`${pathname === '/more' ? 'active' : ''}`} href={'/more'}>
                    More
                </Link>
            </li>
        </ul>
    </nav>
  )
}

export default Navbar;