css Question posted in
Some basic documentation can be found here.

Css – tailwind justify-center not working – reactjs

I have div, inside I have some cards from daisyui. I want those cards to justify center on smaller screens(I have flexed it to column for smaller screens).

<div className='container mx-auto lg:px-28 mt-0 h-auto sm:w-full'>
            <div className='md:shadow-[rgba(0,0,15,0.5)_10px_5px_4px_0px,rgba(0,0,15,0.5)_-10px_5px_4px_0px] mt-0 lg:pl-5 lg:pr-20 lg:pb-10'>
                <p className="lg:pt-10 font-sans tracking-widest font-bold textarea-lg md:text-3xl to-base-content">Now Showing</p>

                <div className='lg:pl-20 lg:pt-10 h-auto w-auto flex lg:flex-row justify-self-center md:justify-between flex-col'>
                    <MovieCard />
                    <MovieCard />
                    <MovieCard />
                </div>
            </div>
        </div>

Here the is something I defined and it’s like this

<div className="rounded-md lg:w-72 lg:h-80 w-64 group bg-no-repeat bg-center bg-cover bg-[url('https://c8.alamy.com/comp/2JJ0F44/turbo-poster-turbo-2013-2JJ0F44.jpg')]">
            {/* bg-[url(bgUrl)] */}
            <div
                className=" mt-28 translate-y-8 transform opacity-0 transition-all group-hover:translate-y-0 group-hover:opacity-100"
            >
                <div className="card-body bg-base-content">
                    <h2 className="card-title text-black">Shoes!</h2>
                    <p className='text-black'>If a dog chews shoes whose shoes does he choose?</p>
                    <div className="card-actions justify-end">
                        <button className="btn btn-primary">Book Now</button>
                    </div>
                </div>
            </div>

        </div>

I want to justify center on above code .

Tags:

2

Answers


  1. 0

    To center the cards on smaller screens, you need to modify your CSS classes to include justify-center when the flex direction is column. Here’s the updated code with justify-center added

    <div className='container mx-auto lg:px-28 mt-0 h-auto sm:w-full'>
<div className='md:shadow-[rgba(0,0,15,0.5)_10px_5px_4px_0px,rgba(0,0,0,0.5)_-10px_5px_4px_0px] mt-0 lg:pl-5 lg:pr-20 lg:pb-10'>
    <p className="lg:pt-10 font-sans tracking-widest font-bold textarea-lg md:text-3xl to-base-content">Now Showing</p>

    <div className='lg:pl-20 lg:pt-10 h-auto w-auto flex lg:flex-row justify-self-center md:justify-between flex-col justify-center'>
        <MovieCard />
        <MovieCard />
        <MovieCard />
    </div>
</div>

    Your MovieCard component should remain unchanged, as it’s already correctly styled.

    Login or Signup to reply.
  2. 0

    To center the cards for the smaller screen just use the items-center instead of using justify-center here is the example:-

    <div className='container mx-auto lg:px-28 mt-0 h-auto sm:w-full'>
            <div className='md:shadow-[rgba(0,0,15,0.5)_10px_5px_4px_0px,rgba(0,0,15,0.5)_-10px_5px_4px_0px] mt-0 lg:pl-5 lg:pr-20 lg:pb-10'>
                <p className="lg:pt-10 font-sans tracking-widest font-bold textarea-lg md:text-3xl to-base-content">Now Showing</p>

                <div className='lg:pl-20 lg:pt-10 h-auto w-auto flex lg:flex-row items-center md:justify-between flex-col'>
                    <MovieCard />
                    <MovieCard />
                    <MovieCard />
                </div>
            </div>
        </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search