Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to center a picture in Tailwindcss from React

I need to understand how to center and really get a best focus on the logo picture inside the login frame as displayed in the evidence attached in this post.
The Tailwindcss code I am using for this logo is the following:

<img className="object-cover h-20 w-35" src="/sampa.png" alt='logo'/>

I need to center the purple logo but I do not know how to make it as displayed in attached screen in this postenter image description here. Your help would be very appreciated. Thank you.

Tags:

2

Answers


  1. 0

    You can align your image to the center with the flex and justify-center operations.

    <div className="flex justify-center">
  <img className="object-cover h-20 w-35" src="/sampa.png" alt='logo'/>          
</div>
    Login or Signup to reply.
  2. 0

    You can do this by applying the mx-auto class

    <img className='object-cover h-20 w-35 mx-auto' src='/sampa.png' alt='logo' />

    It calculates the horizontal margins (margin-left and margin-right) automatically, and centers the element within its parent container.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search