英文:

NextJs Tailwind header styling issue

问题 {#heading}

I have a Next.js 项目并使用 Tailwind 进行样式设计。

期望情况：

• 大屏幕（桌面或笔记本电脑）应该在左侧显示标志，并在右侧显示联系信息（这部分正常工作）。

• 较小的屏幕（手机）应该只显示标志，并且应该居中显示。

问题：

• 当屏幕尺寸较小时，或者我调整浏览器窗口以表示较小的屏幕时，标志没有移动到标题的中心。而且联系信息仍然显示。

英文:

I have Nextjs project and I am using tailwind. I have an issue with styling.

expected:

• large screen (desktop or laptop) should show logo to the left and to the right contact information should show. (this is working as expected)

• smaller screen (mobile phone) should show only logo and it should be centered

issue:

• when the screen size is smaller or I adjust the browser screen to represent a smaller screen the logo does not shift to the center of the header. Also the contact information still show

  import React from "react"; import Image from "next/image"; import { ShoppingBasket } from "lucide-react";

  const AppHeader: React.FC = () => { return ( <header className="bg-[#212529] border-b border-white sm:h-[77px] lg:h-[91px]"> <div className="container mx-auto px-4 flex justify-between items-center h-full"> <div className="flex items-center"> <Image src="/path-to-your-logo.png" alt="Logo" width={190} height={57} className="sm:w-[166px] sm:h-[50px] lg:w-[190px] lg:h-[57px]" /> </div> <div className="sm:hidden md:flex items-center space-x-4"> <div className="flex flex-col font-medium text-white font-montserrat"> <span style={{ fontSize: "12px" }}>1503 Kelly's.</span> <span style={{ fontSize: "12px" }}>Clove SC 78620</span> <span style={{ fontSize: "12px" }}>(704) 777-7777</span> <span style={{ fontSize: "12px" }}>2131@gmail.com</span> </div> <div className="border-l h-[48px]"></div> <ShoppingBasket className="text-white h-8 w-8" /> </div> </div> </header> ); };

  export default AppHeader;

答案1 {#1}

得分: 0

Remove the sm: prefix from sm:hidden from the <div> that encapsulates the right contact information so that the right contact information will have display: none applied until the md: breakpoint.

To center the logo, apply justify-items: center via the justify-center utility class, and then apply justify-items: space-between for screens larger than the md breakpoint by adding the md:justify-between utility class. 英文:

Remove the sm: prefix from sm:hidden from the <div> that encapsulates the right contact information so that the right contact information will have display: none applied until the md: breakpoint.

To center the logo, apply justify-items: center via the justify-center utility class, and then apply justify-items: space-between for screens larger than the md breakpoint by adding the md:justify-between utility class:

<!-- begin snippet: js hide: false console: false babel: true -->

<!-- language: lang-js -->

const ShoppingBasket = () => 'ShoppingBasket';
const AppHeader = () => {
return (
<header className="bg-[#212529] border-b border-white sm:h-[77px] lg:h-[91px]">
<div className="container mx-auto px-4 flex justify-center items-center h-full md:justify-between">
<div className="flex items-center">
<img
src="https://picsum.photos/190/57"
alt="Logo"
width={190}
height={57}
className="sm:w-[166px] sm:h-[50px] lg:w-[190px] lg:h-[57px]"
/>
</div>
<div className="hidden md:flex items-center space-x-4">
<div className="flex flex-col font-medium text-white font-montserrat">
<span style={{ fontSize: "12px" }}>1503 Kelly's.</span>
<span style={{ fontSize: "12px" }}>Clove SC 78620</span>
<span style={{ fontSize: "12px" }}>(704) 777-7777</span>
<span style={{ fontSize: "12px" }}>2131@gmail.com</span>
</div>
<div className="border-l h-[48px]"></div>
<ShoppingBasket className="text-white h-8 w-8" />
</div>
</div>
</header>
);
};
ReactDOM.createRoot(document.getElementById('app')).render(<AppHeader/>);

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>
`<div id="app"></div>
`

<!-- end snippet -->