Блог

Я новичок в Next.js. У меня есть домашняя страница в папке «Страницы», и я пытаюсь <h1></h1> расположить ее в центре изображения, но вместо этого она толкает ее вниз. Вот мой код…

 import image from '../public/images/background.jpg'
import Image from "next/image";
import Layout from "../components/Layout";

export default function HomePage() {
    return (
        <Layout>
            <main>
                <Image
                    src={image}
                    alt="Programming"
                    className="absolute object-cover w-full h-full"
                />
                <section className="relative flex justify-center min-h-screen pt-12 lg:pt-64 px-8">
                    <h1 className="text-6xl text-green-100 font-bold cursive leading-none lg:leading-snug home-name">Hi. I'm
                        Shloimi</h1>
                </section>
            </main>
        </Layout>

    )
}
 

Кто-нибудь может мне помочь, пожалуйста. И я использую Tailwind.css

Попробуйте это,

   <main className="relative">
    <Image
      src={image}
      alt="Programming"
      className="w-full h-full bg-cover"
    />
    <h1 className="absolute w-full text-6xl font-bold leading-none text-center text-green-100 top-1/2 transform translate-y-1/2 cursive lg:leading-snug home-name ">
      asdf
    </h1>
  </main>
 

Я удалил pt-12 lg:pt-64 , чтобы сделать вашу цель и вставил items-center , но если вы хотите использовать pt , то вы можете настроить эти значения.

Счастливого кодирования 🙂