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 post
. Your help would be very appreciated. Thank you.
Solution
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.
- React map using Objects.entries for rendering inputs dynamically and change values of individual fields
- ServiceWorker Update loop - Create react app
- Mantine Form TextInput won't maintain focus when input is wrapped in another component
- Displaying pure JSON format with black background in GraphQL Express React
- Canceling a react-query mutation
- Creating a Custom Button in React Typescript and add onClick Event
- Argument of type x is not assignable to parameter of type 'ForwardRefRenderFunction<unknown, PropsWithoutRef<P>>'
- fetch data with sort not updating after build
- Can you destructure a result from an SWR query?
- Flask Api working Half the time- works flawlessly when sending post with python but not with javascript
- react-native-chart-kit Min and Max value
- Preserve Exit Animations with React Router v6 and Framer Motion
- How do I load a remote script (widget) inside a react component
- How to make series of images to slide uniformly and horizontally with using JavaScript to change transform transition
- TS2503: Cannot find namespace 'JSX'. - What is equivalent of `JSX.IntrinsicElements`?
- Any way to render HTML in react-markdown
- Problem with rendering markdown in NextJS/React
- Change Gatsby Link Behaviour - Stop Scroll Animation on Page Change
- How can i convert a big gltf file to jsx?
- Can we have a portal in Next.js
- NextAuth: how to return custom errors without redirection
- Why is React useState with functional update form is needed?
- Use localStorage.getItem() with typescript
- How to change active tab color in Material UI?
- Electron React 404 not found in production
- Adding Tanstack react-query to laravel 11 reactjs inertia project
- How to call loading function with React useEffect only once
- Getting Uncaught Error: Minified React error #418 on my Gatsby production build
- Autodesk viewer error TypeError: Cannot read properties of null (reading 'updateMaterials')
- How to make search in select box using React JS?