I'm trying to figure out how to center an image (svg) in tailwind css.
<Container>
<div className="mx-auto max-w-2xl md:text-center">
<p className="justify-center">
// I have tried using center-content, text-center but get the img left aligned. How can I force it into the center of the container?
<Image src={company.logo} alt={company.name} unoptimized />
</p>
<p className="mt-4 text-lg tracking-tight text-slate-700">
{company.name}
</p>
</div>
</Container>
I can get the text for company name centered, but the image is fixed in left alignment with every variation I tried.
Your justify-center wont work if you haven't included flex.By default it display of block
<Container>
<div class="mx-auto max-w-2xl md:text-center">
<p class="flex justify-center"> // 👈 specify flex here
<image src="https://www.bing.com/th?id=OIP.o7c7ftXCLdQDsfE9NkWCvwHaGb&w=268&h=232&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="{company.name}" unoptimized />
</p>
<p class="mt-4 text-4xl tracking-tight text-slate-700">Company Here</p>
</div>
</Container>
Output:
Tailwind-css playground link
Related
Here I want these tick elements to stay behind the image and only show those ticks that image does not cover and I want that tick elements relative to these images. So I made these these ticks absolute and the parent div relative. But the problem is it is showing tick marks in front of the image. I tried to remove them with z-index but z-index did not work.
What could be the solution for this?
<div className=' relative flex justify-around '>
<div className='grid grid-cols-1 sm:grid-cols-2 w-full lg:w-1/2'>
<div className='flex justify-end mr-12 relative'>
<img className=' ' src={data.imgLink} alt="" />
<img className=' absolute top-4' src="/image/thirdpart/Group 7.png" alt="" />
</div>
<div className='text-white flex flex-col justify-center min-w-80 ml-14 sm:ml-0'>
<div className='text-2xl font-bold mb-4'>{data.title}</div>
<div>{data.description}
</div>
<div className='bg-[#239CAC] w-fit p-4 rounded-full my-5 font-semibold cursor-pointer'>
<button>Read the documentation</button>
</div>
</div>
</div>
<div></div>
</div>[![enter image description here][1]][1]
I am trying to create a visual for my project where the image is placed in a rotated container (div), however when the container is rotated the image inside gets rotated to the same number of degrees as the container.
Does anyone know how can I have the image straight and covering the container while the container is rotated?
<template>
<div class="p-4">
<div class="w-80 h-80 bg-blue-500 rotate-90">
<div class="w-80 h-80 bg-red-500 rotate-45">
<img
class="h-full w-full object-cover object-center"
src="https://www.aerointernational.de/content/uploads/2022/09/albums-global-8000-exterior-1_0-scaled-1150x600.jpg"
fit="fill"
alt="aircraft"
/>
</div>
</div>
</div>
</template>
Please see image codesandbox to for a clearer depiction of the issue.
https://codesandbox.io/s/hardcore-microservice-vix2uh?file=/pages/index.vue
I am using Nuxt / Tailwind CSS.
This one is using clip path: https://play.tailwindcss.com/vPFMKkR9WS
Otherwise, you can also do something like this: https://play.tailwindcss.com/Mume9LHfhm
<div class="m-20">
<section class="relative pt-20 pl-8">
<div class="absolute h-64 w-64 rotate-45 rounded-3xl bg-blue-500"></div>
<img class="absolute h-64 w-64 -rotate-[38deg] rounded-3xl object-cover object-center" src="http://i.imgur.com/kreZqnx.jpg" fit="fill" alt="aircraft" />
</section>
</div>
I am trying to place my Image on the left side of the div.
Anything I try to do to move the Image or the div fail to work. Why is the Image stuck in the center?
I was able to achieve this using flexbox but had to switch to relative positioning because of the Nextjs Image component conflict. In the Image tag you'll see "layout='fill'" which was the root of my problem, but I am unable to rid myself of that piece of code
<div className="relative w-full bg-blue p-4 my-4 rounded-2xl lg:basis-5/12">
<Image className="float-left mr-4" src={"/"+icon} layout={"fill"} objectFit={"contain"} />
<div>
<h3>{ title }</h3>
<p>
{ paragraph }
</p>
</div>
</div>
What I am getting right now:
The float will not work with layout='fill'. Change it to either 'fixed' or 'intrinsic'. I recommend wrapping the Image tag into a div and making the div float. Try something like this.
<div className="bg-blue relative my-4 w-full rounded-2xl p-4 lg:basis-5/12">
<div className="float-left mr-4">
<Image src={'/' + icon} layout={'fixed'} height="120" width="120" />
</div>
<div>
<h3>{title}</h3>
<p>{paragraph}</p>
</div>
</div>
And to improvise it. You do not even need to use float. You can achieve same with flex. So if using float is not important you can do something like this
<div className="bg-blue my-4 flex w-full gap-4 rounded-2xl p-4 lg:basis-5/12">
<Image src={'/' + icon} layout={'intrinsic'} height="120" width="120" alt="" />
<div>
<h3>{title}</h3>
<p>{paragraph}</p>
</div>
</div>
Changing image on mouse hover :
I have a png image , with text engineerign and another picture with same text but different style.
I need on Hover to change between these 2 images.
I did that few times with normal <img TAG but in next js we need to use their <Image tag insted and this is not possible :
<Image src={engin} alt={'something'} onMouseOver={e => (e.currentTarget.src =
engin_fill)} />
Help is really appriciated
You can create 2 components inside some wrapper and just switch them on hover
<Wrapper onMouseOver={() => setHovered(true)}>
{!hovered&&<Image1/>}
{hovered&&<Image2/>}
</Wrapper>
You should use Tailwind CSS. After that, the code will look like:
<Image src={engin} class="z-20 hover:z-0" />
<div class="z-10">Text</div>
e.g.-
<div class="relative ">
<a class="absolute inset-0 z-10 bg-white text-center flex flex-col items-center justify-center opacity-0 hover:opacity-100 bg-opacity-90 duration-300">
<h1 class=tracking-wider >Title</h1>
<p class="mx-auto">Description</p>
</a>
<a href="#" class="relative">
<div class="h-48 flex flex-wrap content-center">
<img src="/image_url" class="mx-auto " alt="">
</div>
</a>
More answers:
Tailwind CSS: display text on image hover
How to install tailwind css: https://tailwindcss.com/docs/installation
I am trying to change my standard <img/> to the NextJS <Image/> but I cannot find why my images are not rendered properly.
This is the basis tag
<div className=" mx-auto sm:w-9/12 lg:w-7/12 xl:w-8/12">
<img
className="object-fill rounded-md mx-auto sm:w-9/12 lg:w-full xl:w-8/12"
src={img}
alt="something"
/>
</div>
this works perfectly
While using the NextJS Image it does not work correclty
<div className=" mx-auto sm:w-9/12 lg:w-7/12 xl:w-8/12">
<Image
src={img}
layout="fill"
objectFit="contain"
alt="something"
className="rounded-md mx-auto w-full"
></Image>
</div>
All I can see it that the outer div of the <Image/> itself takes the width of the whole div (text + image) because the parent div of the <Image/> has apparently no width or height, while it has w-7/12.
You can try use a div as a container for style the Image component.
<div className=" mx-auto sm:w-9/12 lg:w-7/12 xl:w-8/12">
<div className="rounded-md mx-auto w-full">
<Image
src={img}
layout="fill"
objectFit="contain"
alt="something"
/>
</div>
</div>