#Why is my logo not centered?

1 messages · Page 1 of 1 (latest)

fringe portal
#

Why my logo is not in the center of parent element?

image.png
hallow gulchBOT
#

Hi @fringe portal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Hmm, I don't know enough to give you a confident answer yet. The extracts provided do not contain specific information about centering elements in Next.js or CSS. However, you might want to check your CSS settings for the parent element and the logo. Make sure you're using the correct CSS properties to center the logo.

For more detailed information, you can refer to the Next.js Documentation (https://nextjs.org/docs) or Vercel Documentation (https://vercel.com/docs) for possible solutions.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@fringe portal kapa.ai is still learning and improving, please let us know how it did by reacting below

fringe portal
#

@hallow gulch Here's my code:

<div className="flex flex-col text-center max-w-screen-sm mb-10">
          <Link href="/" className="items-center justify-center ">
            <Image
              src="/logo.png"
              alt="WorkBench v2.1"
              width={100}
              height={100}
            />
          </Link>
          <h1 className="text-stone-200 font-bold text-6xl">
            404
          </h1>
          <p className="text-stone-400 mt-5">
            This page was not found on our servers...
          </p>
        </div>
hallow gulchBOT
#

Let me check the knowledge base for you. One moment! :books:

#

From the code you've provided, it seems like you're using Tailwind CSS for styling. To center the logo within the Link component, you can apply the flex and justify-center classes to the Link component. However, these classes should be applied to a div that wraps the Image component, not directly to the Link component. Here's how you can modify your code:

<div className="flex flex-col text-center max-w-screen-sm mb-10">
  <Link href="/">
    <div className="flex justify-center">
      <Image
        src="/logo.png"
        alt="WorkBench v2.1"
        width={100}
        height={100}
      />
    </div>
  </Link>
  <h1 className="text-stone-200 font-bold text-6xl">
    404
  </h1>
  <p className="text-stone-400 mt-5">
    This page was not found on our servers...
  </p>
</div>

In this modification, the Image component is wrapped with a div that has the flex and justify-center classes. This should center the logo within the Link component.

For more information on using Tailwind CSS with Next.js, you can refer to the Next.js Documentation (https://nextjs.org/docs/app/building-your-application/styling/tailwind-css).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@fringe portal kapa.ai is still learning and improving, please let us know how it did by reacting below