Next.js Discord

Discord Forum

how to center <div> (jk)

Answered
Laysan Albatross posted this in #help-forum
Open in Discord
Avatar
Laysan AlbatrossOP
export default function LandingPage() {
  return (
    <div className="flex items-center justify-center">
      <div className="grid grid-cols-2 space-x-2 space-y-4">
        <div className="col-span-2 w-64">
          <IamAnimated />
        </div>
        <div className="col-span-1">
          <DrawerDownloadFiles />
        </div>
        <div className="col-span-1">
          <ButtonGetStarted />
        </div>
        <SvgSatellite className="w-32" />
      </div>
    </div>
  )
}


I have this grid and want to center <IamAnimated>. How? 😄
Image
Answered by SharpieMaster
export default function LandingPage() {
  return (
    <div className="flex items-center justify-center">
      <div className="grid grid-cols-2 space-x-2 space-y-4">
        <div className="col-span-2 flex items-center justify-center text-center">
          <button>Thing</button>
        </div>
        <div className="col-span-1 text-center">
          <button>Download</button>
        </div>
        <div className="col-span-1 text-center">
          <button>Contact Me</button>
        </div>
        <div className="col-span-2 flex items-center justify-center">
          <button>Login With Email</button>
        </div>
        <button>Idk what this one is</button>
      </div>
    </div>
  );
}
View full answer

20 Replies

Avatar
SharpieMaster
export default function LandingPage() {
  return (
    <div className="flex items-center justify-center">
      <div className="grid grid-cols-2 space-x-2 space-y-4">
        <div className="col-span-2 w-64 flex items-center justify-center">
          <IamAnimated />
        </div>
        <div className="col-span-1">
          <DrawerDownloadFiles />
        </div>
        <div className="col-span-1">
          <ButtonGetStarted />
        </div>
        <SvgSatellite className="w-32" />
      </div>
    </div>
  )
}
Avatar
Laysan AlbatrossOP
tried that before, doesnt work 😦
Avatar
SharpieMaster
try inspect element and see what is going wrong
Avatar
Laysan AlbatrossOP
I wanna center the first Svg and the Login with Email button
So the struggle is not to center the whole grid in the middle of the page - that already works fine.
Image
export default function LandingPage() {
  return (
    <div className="flex items-center justify-center">
      <div className="grid grid-cols-3 space-x-2 space-y-4">
        <div className="col-span-3 w-64">
          <IamAnimated />
        </div>
        <div className="col-span-1">
          <DrawerDownloadFiles />
        </div>
        <div>
          <DrawerContact />
        </div>
        <div className="col-span-3 w-full">
          <ButtonGetStarted />
        </div>
        <SvgSatellite className="w-32" />
      </div>
    </div>
  )
}
Avatar
SharpieMaster
sorry, I cant really help you without the specific components you are using
Avatar
Laysan AlbatrossOP
DrawerDownloadFiles.tsx
Image
DrawerContact.tsx
Image
ButtonGetStarted.tsx
import { EnvelopeOpenIcon } from '@radix-ui/react-icons'

import { Button } from '@/components/ui/button'

export function ButtonGetStarted() {
  return (
    <Button>
      <EnvelopeOpenIcon className="mr-2 h-4 w-4" /> Login with Email
    </Button>
  )
}
IamAnimated.tsx
Image
but I'm pretty sure the components have nothing to do with my issue
Avatar
SharpieMaster
export default function LandingPage() {
  return (
    <div className="flex items-center justify-center">
      <div className="grid grid-cols-3 space-x-2 space-y-4">
        <div className="col-span-3 w-64">
          <button>Thing</button>
        </div>
        <div className="col-span-1">
          <button>Download</button>
        </div>
        <div>
          <button>Contact Me</button>
        </div>
        <div className="col-span-3 w-full">
          <button>Login With Email</button>
        </div>
        <button>Idk what this one is</button>
      </div>
    </div>
  );
}

Something like this?
Image
Avatar
Laysan AlbatrossOP
wanna center it like this
Image
Avatar
SharpieMaster
Image
Avatar
SharpieMaster
export default function LandingPage() {
  return (
    <div className="flex items-center justify-center">
      <div className="grid grid-cols-2 space-x-2 space-y-4">
        <div className="col-span-2 flex items-center justify-center text-center">
          <button>Thing</button>
        </div>
        <div className="col-span-1 text-center">
          <button>Download</button>
        </div>
        <div className="col-span-1 text-center">
          <button>Contact Me</button>
        </div>
        <div className="col-span-2 flex items-center justify-center">
          <button>Login With Email</button>
        </div>
        <button>Idk what this one is</button>
      </div>
    </div>
  );
}
Answer
Avatar
SharpieMaster
you cant set a width and a col-span at the same time, if you want to adjust the width you can change the whole grid width
idk why you were using 3 columns on the grid
I just added text center because I was using buttons for the example
Avatar
Laysan AlbatrossOP
Thank you so much!