I am trying to centre a div present inside a CSS Grid horizontally and vertically. I am using TailwindCSS v3. Using mx-auto, I can align the content horizontally, but align-middle along with flexbox isn't showing any results. I am attaching the code snippet below.
<div className="grid grid-cols-6 mb-2">
<div className="col-span-1">
<div className="flex align-middle">
<ImLocation className="text-lg text-black mx-auto" />
</div>
</div>
<div className="col-span-5">
<p className="text-sm md:text-base text-black">
Address Line 1, <br />
Address Line 2, <br />
Address Line 3
</p>
</div>
</div>
The issue here is that the first inner-div (with class col-span-1) has a smaller height than the other div. I want that div to align in the centre with the other div vertically. ImLocation is a react icon that I have used.
Use items-center and justify-center like below:
<div className="grid grid-cols-6 mb-2">
<div className="col-span-1">
<div className="flex flex-row items-center justify-center">
<ImLocation className="text-lg text-black mx-auto" />
</div>
</div>
<div className="col-span-5">
<p className="text-sm md:text-base text-black">
Address Line 1, <br />
Address Line 2, <br />
Address Line 3
</p>
</div>
</div>
Related
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
I need to add 2 children of a parent element one on the top and another on the bottom. something like this.
and this is the code I have.
<div class=" w-full flex justify-betwen bg-white items-center">
<div class="ml-auto">
<img class="object-cover mr-2 md:mr-4 ml-2 md:ml-4 float-left h-40 lg:w-32 w-14 xs:w-16"
src="../img/Bless.png" alt="" />
</div>
<div class="w-full mx-8">
<div class="text-redfull text-ms xs:text-lg md:text-xl lg:text-2xl xl:text-3xl">
Some text here to top as a title.
</div>
<div
class=" text-gray70 flex justify-between items-center text-xs xs:text-base md:text-base lg:text-lg mb-0">
and this is the date to the bottom Uploaded Auguts 4, 2020
</div>
</div>
</div>
Title should stay at the top.
Date to the bottom.
If anyone knows:)
You can add two divs for Title and Date and add vertical margin to them.
I am not sure whether you want with the text or not so I had implemented for both the cases.
Case 1: With text
<script src="https://cdn.tailwindcss.com"></script>
<div class="justify-betwen flex w-full items-center bg-white">
<div class="ml-auto">
<img class="xs:w-16 float-left mr-2 ml-2 h-40 w-14 object-cover md:mr-4 md:ml-4 lg:w-32" src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_blue.s2014.png" alt="" />
</div>
<div class="mx-8 w-full">
<div class="text-3xl font-semibold text-red-900">Your Title here</div>
<div class="my-3">
<div class="text-ms xs:text-lg text-red-500 md:text-xl lg:text-2xl xl:text-3xl">Some text here to top as a title.</div>
<div class="xs:text-base mb-0 flex items-center justify-between text-xs text-gray-500 md:text-base lg:text-lg">and this is the date to the bottom Uploaded Auguts 4, 2020</div>
</div>
<div class="text-base font-extralight">25 June 2022</div>
</div>
</div>
Case 2: Without Text
<script src="https://cdn.tailwindcss.com"></script>
<div class="justify-betwen flex w-full items-center bg-white">
<div class="ml-auto">
<img class="xs:w-16 float-left mr-2 ml-2 h-40 w-14 object-cover md:mr-4 md:ml-4 lg:w-32" src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_blue.s2014.png" alt="" />
</div>
<div class="mx-8 w-full">
<div class="text-3xl font-semibold text-red-900">Your Title here</div>
<div class="my-12">
</div>
<div class="text-lg font-extralight">25 June 2022</div>
</div>
</div>
I had use an online image, so you can replace it with your image.
If You want more gap, then simply increase the my-12 to more.
Using Tailwind With ReactJS I'm trying to align an image to the center but I can't, this is my code:
<div class="grid md:grid-cols-2 gap-1 place-content-center">
<div className="hidden md:block my-10 md:ml-10 shadow rounded-sm">
<img
src={ Logo }
alt= "Logo"
className="object-none object-center"
/>
</div>
<form className="my-10 md:mr-10 bg-white shadow rounded-sm px-10 py-5">
...
</form>
</div>
Here is a screenshot of the result:
Make the div parent flex instead of block, add justify-center
like this :
<div class="grid place-content-center gap-1 md:grid-cols-2">
<div class="hidden md:inline-flex my-10 md:ml-10 shadow rounded-sm w-full justify-center">
<img src="https://picsum.photos/200" alt="Logo" class="object-none object-center" />
</div>
<form class="my-10 md:mr-10 bg-white shadow rounded-sm px-10 py-5">...</form>
</div>
have a look https://play.tailwindcss.com/lQAKX22Qf7
Or you could just add mx-auto to img
Okay so I suppose you just want to align the image to the center of that grid item, in that case you can just simply add justify-self-center class into the div that contain the image, something like this:
<div className="grid md:grid-cols-2 gap-1 place-content-center">
<div className="hidden md:block my-10 md:ml-10 shadow rounded-sm justify-self-center">
<img
src={ Logo }
alt= "Logo"
className="object-none object-center"
/>
</div>
<form className="my-10 md:mr-10 bg-white shadow rounded-sm px-10 py-5">
...
</form>
</div>
Also I noticed there's a typo problem at the outer div, it should be className instead of class.
Hope this helps
you need to add m-auto to image. you can see here
<div class="grid place-content-center gap-1 grid-cols-2">
<div class="my-10 shadow rounded-sm w-full justify-center">
<img src="https://picsum.photos/200" alt="Logo" class="object-none object-center m-auto" />
</div>
<form class="my-10 bg-white shadow rounded-sm px-10 py-5">...</form>
</div>
I need to programm the following design
I want to give the big image in the middle (dark red) the rematining space of my flexcontainer, where the yellow stuff is margin/paddings. The problem i have here is, that my image always overlapps the flex container and also the images in the bottom and the svgs. I dont want to give the image a fixed height nor some percentage values because i want to keep it responsive and dynamicaly. Here is my code:
<div
class="flex flex-col flex-1 fixed bg-black w-auto inset-x-11 inset-y-10 z-1003">
</svg>
<div class="fixed flex flex-1 flex-col inset-x-20 inset-y-20">
<div class="flex h-3/4 justify-center items-center">
<svg
</svg>
<img
class="mx-6 w-5/6 h-full bg-gray-light border-2 rounded-md"
My Big Image
/>
<svg
</svg>
</div>
<div class="flex w-full flex-row flex-1 items-end justify-center mt-6">
<div v-for="img in 3" class="mx-6 bg-black-normal rounded-lg">
<img
the orange images
/>
</div>
</div>
</div>
The best solution here would be for me to remove every heights and only work with flex flex-1 flex-shrink and so on but its not working properly as expected.
You can do this in many ways. Flexboxes are good approach, but for for thumbnails images I would use grid to make them even (but sure flexboxes can by used as well).
It does not matter if you use SVG or not for buttons. But if you have any problem with them - please provide real reproduction example (https://play.tailwindcss.com/ can be usefully).
Demo: https://play.tailwindcss.com/RsXsrdSYG3
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="min-h-screen bg-gray-50 p-8 flex flex-col">
<div class="flex items-center">
<button class="flex-none w-16 h-16 bg-gray-500">PREV</button>
<div class="px-6">
<img src="https://via.placeholder.com/1920x1080" />
</div>
<button class="flex-none w-16 h-16 bg-gray-500">NEXT</button>
</div>
<div class="mt-6 grid grid-cols-3 gap-6">
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
</div>
</div>
Or if you want to fill screen height (but empty space will be visible over big image to keep responsive ratio).
Demo: https://play.tailwindcss.com/hTYuGjPHHk
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="h-screen bg-gray-50 p-8 flex flex-col">
<div class="flex items-center flex-1">
<button class="flex-none w-16 h-16 bg-gray-500">PREV</button>
<div class="px-6 h-full flex items-center">
<img src="https://via.placeholder.com/1920x1080" />
</div>
<button class="flex-none w-16 h-16 bg-gray-500">NEXT</button>
</div>
<div class="mt-6 grid grid-cols-3 gap-6">
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
<img src="https://via.placeholder.com/1920x1080" />
</div>
</div>
I'm just getting started with tailwind and I would like to grid essentially a row of images that fit the container.
Currently I am just stubbing in 2 photos for testing/getting to know tailwind purposes.
<main class="mt-12 lg:mt-32">
<section class="container mx-auto px-6">
<div class="w-full lg:flex items-center">
<div *ngFor="let item of photos">
<p class="text-md lg:text-xl font-light text-gray-800 mb-8">
{{item.description}}
</p>
<div class="grid grid-col-2 gap-2">
<img [src]="image" *ngFor="let image of item.images"
class="object-contain shadow rounded border-none">
</div>
</div>
</div>
</section>
</main>
This code is causing the 2 images to essentially appear underneath each other as seen here
https://i.imgur.com/vhSBkc7.png
Thank you for any help.
Your class should me grid-cols-2 and the img tag should have col-span-1. Checkout Grid Columns
<div class="grid grid-cols-2 gap-2"> // grid-cols-2
<img [src]="image" *ngFor="let image of item.images" class="col-span-1 object-contain shadow rounded border-none"> // col-span-1
</div>