Tailwind CSS center vertically and horizontally inside flex flex-col? - html

I've got the following code and have tried adding "justify-content", "align-middle", and others but still can't seem to get it to align the h5 and link in the middle of the containing div. Should I be structuring this another way, without using "flex" or "flex-col"?
<section id="cta-image-box"
class="container mx-auto py-24 mt-32 mb-32">
<div class="h-[335px] rounded-[40px] bg-slate-500 bg-bgCTA bg-cover bg-center bg-blend-multiply">
<div class="flex flex-col items-center">
<h5 class="text-5xl font-bold text-white mb-10">
Lorem ipsum dolor site <span class="text-gray-300">15% OFF</span> amet
</h5>
<a href="#"
alt=""
class="px-6 py-3 w-fit rounded-full bg-slate-200 text-gray-800 hover:bg-slate-800 hover:text-white">
Discount Code
</a>
</div>
</div>
</section>

You can achieve this using h-full and place-content-center place-items-center on wrapper div.
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<section id="cta-image-box" class="container mx-auto py-24 mt-32 mb-32">
<div class="h-[335px] rounded-[40px] bg-slate-500 bg-bgCTA bg-cover bg-center bg-blend-multiply">
<div class="h-full flex flex-col place-content-center text-center place-items-center">
<h5 class="text-5xl font-bold text-white mb-10">
Lorem ipsum dolor site <span class="text-gray-300">15% OFF</span> amet
</h5>
<a href="#" alt="" class="px-6 py-3 w-fit rounded-full bg-slate-200 text-gray-800 hover:bg-slate-800 hover:text-white">
Discount Code
</a>
</div>
</div>
</section>
</body>

Take a look to that answer which is already explained how to align vertically center quite clear.
Below, you can see how to apply it to your code. You should give these classes: flex justify-center items-center.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<section id="cta-image-box" class="container mx-auto py-24 mt-32 mb-32">
<div class="flex justify-center items-center h-[335px] rounded-[40px] bg-slate-500 bg-bgCTA bg-cover bg-center bg-blend-multiply">
<div class="flex flex-col items-center">
<h5 class="text-5xl font-bold text-white mb-10">
Lorem ipsum dolor site <span class="text-gray-300">15% OFF</span> amet
</h5>
<a href="#" alt="" class="px-6 py-3 w-fit rounded-full bg-slate-200 text-gray-800 hover:bg-slate-800 hover:text-white">
Discount Code
</a>
</div>
</div>
</section>

Related

How to center the text within the divisions?

I want to center the text within the division so that the two text columns aren't right next to each other.
Original:
So that it's like this:
My code:
<div class="px-80 py-4 grid grid-cols-2 divide-x-4">
<div className="w/2 flex flex-col">
<div class="font-bold text-6xl text-center">+9.7%</div>
<p class="text-gray-700 text-4xl text-center">
Since Last Quarter
</p>
</div>
<div className="w/2 flex flex-col justify-center w-full h-full items-center">
<div class="font-bold text-6xl text-center">-11.3%</div>
<p class="text-gray-700 text-4xl text-center">YTD</p>
</div>
</div>
</div>```
Try removing the grid and remove the px-80 and replace it with flex and the following code:
<div class="flex p-10 divide-x-2">
<div class=" flex flex-col flex-1">
<div class="font-bold text-6xl text-center font-[roboto]">+9.7%</div>
<p class="text-gray-700 mt-2 text-2xl text-center font-serif">
Since Last Quarter
</p>
</div>
<div class=" flex flex-col justify-center flex-1 items-center">
<div class="font-bold text-6xl text-center font-[roboto]">-11.3%</div>
<p class="text-gray-700 mt-2 text-2xl text-center font-serif">YTD</p>
</div>
</div>
</div>
</div>
Output:
Tailwind-play

CSS - Make a Sidebar Box Sticky

I'm using TailwindCSS in my project. My page looks like below:
<main class="max-w-7xl mx-auto mt-6 px-4">
<div class="flex flex-col md:space-x-12 justify-center md:flex-row">
<div class="w-full md:w-9/12 mb-8">
<h1 class="text-3xl font-bold mt-2 mb-4">Title</h1>
<p class="mb-4 uppercase text-gray-500">META DATA</p>
<div class="prose lg:prose-lg post">
<p class="bg-gray-200 p-5 h-36 m-3"></p>
<p class="bg-gray-200 p-5 h-36 m-3"></p>
<p class="bg-gray-200 p-5 h-36 m-3"></p>
<p class="bg-gray-200 p-5 h-36 m-3"></p>
<p class="bg-gray-200 p-5 h-36 m-3"></p>
<p class="bg-gray-200 p-5 h-36 m-3"></p>
<p class="bg-gray-200 p-5 h-36 m-3"></p>
<p class="bg-gray-200 p-5 h-36 m-3"></p>
</div>
<hr class="mt-5" />
</div>
<div class="w-full md:w-3/12">
<div class="mb-5 mx-auto" style="max-width:300px">
<div class="rounded rounded-lg border">
<p class="bg-blue-100 p-5 h-12 m-3"></p>
<p class="bg-blue-100 p-5 h-12 m-3"></p>
<p class="bg-blue-100 p-5 h-12 m-3"></p>
<p class="bg-blue-100 p-5 h-12 m-3"></p>
</div>
<div class="rounded rounded-lg border mt-10 sticky self-auto top-20">
<div class="p-20">Make this box sticky</div>
</div>
</div>
</div>
</div>
</main>
I want to make the bottom box in the right sidebar sticky but it's not happening. I've seen many threads and followed advice like make it flex-start, but it doesn't work in this layout. Can you please help?
You can see the playground here - https://play.tailwindcss.com/MaFc2vXQRe
Add display: unset; on the parent div of sticky div check below code.
<div class="mb-5 mx-auto" style="max-width:300px; display: unset;">
Let me know if you have to face any issue

Tailwind: equal height columns

I have 3 columns that each contain a persons image, name, function and a quote. I want all 3 columns to be equal in height.
So far i have tried setting p class="flex-1" which did nothing, i also changed the 2nd inner div to class="flex flex-1 p-6 gap-y-4". This did make the columns equal in height, but it made the div a row instead of a column, if i use flex-1 together with flex-col it does not set the columns equal in height.
How can achieve said behaviour without using a static height in tailwind?
HTML
<div class="flex flex-col">
<div class="w-full">
<img class="h-full w-full" [src]="'/api'" alt="employee image">
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300">
<h3 class="text-3xl font-bold text-white">{{employee?.name}}</h3>
<h4 class="text-lg uppercase text-black">{{employee?.function}}</h4>
<p class="text-center text-xl font-bold text-black" [innerHtml]="employee?.quote"></p>
</div>
</div>
You should use utility classes grid and grid-cols-3 to create desired layout.
You can find below a code example based on the code you sent. By the way, for future questions you might ask on stack overflow, please note that the good practice is to share code that actually works, ie self-contained, preferably in a code snippet. As such, your code references an image and employee object which are not contained in your code.
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-3 gap-3">
<div class="flex flex-col">
<div>
<div class="h-20 bg-slate-400">Image</div>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
</div>
<div class="flex flex-col">
<div>
<div class="h-20 bg-slate-400">Image</div>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
</div>
<div class="flex flex-col">
<div>
<div class="h-20 bg-slate-400">Image</div>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
</div>
</div>
EDIT: Following OP's comment, I added flex-auto to the employee card so that it can grows if needed to match the height of other columns. Intrinsically, all columns in a grid have same height, you only need to let its inner elements grow if you want same to take all possible height.
You can use a flex wrapper instead of using grid and specifying columns count.
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex gap-3">
<div class="flex flex-col w-full">
<div>
<div class="h-20 bg-slate-400">Image</div>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
</div>
<div class="flex flex-col w-full">
<div>
<div class="h-20 bg-slate-400">Image</div>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
</div>
<div class="flex flex-col w-full">
<div>
<div class="h-20 bg-slate-400">Image</div>
</div>
<div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
<h3 class="text-3xl font-bold text-white">Employee Name</h3>
<h4 class="text-lg uppercase text-black">Employee Function</h4>
<p class="text-center text-xl font-bold text-black">Employee Quote</p>
</div>
</div>
</div>

Tailwind css: align element bottom of parent div

<div class="grid grid-cols-5 gap-4">
<div class="overflow-hidden border hover:rounded-lg hover:shadow-lg justify-evenly">
<div class="flex px-3 pt-1 justify-end">
<a class="underline italic" href="desc.html" title="Description">More</a>
</div>
<a class="cursor-pointer" href="www.www.com">
<img src="img/img.JPG" />
</a>
<div class="flex w-full justify-evenly mt-1 mb-4">
<a href="www.www.com class="bg-green-700 hover:bg-green-800 text-white font-bold py-1 px-4 rounded">
Button
</a>
</div>
</div>
<div class="overflow-hidden border hover:rounded-lg hover:shadow-lg justify-evenly">
</div>
...
</div>
I have grid with multiple grid cells. Each cell contains image. Under image there is a button. Currently button is placed just under the image. However, heights of images are different. So those buttons are not aligned.
I wonder how to put these buttons at the bottom of each cell??
I tried to add align-bottom on button wrapper, but it doesn't help.
Just need to play around with h-# flex flex-col justify-*. See a working demo.
<div class="grid grid-cols-3">
<div class="col-span-1 h-96 flex flex-col justify-between">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="h-full bg-cover bg-center" />
<button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
</div>
<div class="col-span-1 h-96 flex flex-col justify-between">
<img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" class="h-3/5 bg-cover bg-center" />
<button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
</div>
<div class="col-span-1 h-96 flex flex-col justify-between">
<img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" class="h-3/4 bg-cover bg-center" />
<button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
</div>
</div>
I see the following changes:
The card div should be a flex column, with the classes flex and flex-col and justify-between. This one each child element will be vertically positioned so there is the same space between them
Wrap the Img and the more link in a div, this way the space between the img and the more won't be that large

How can I make flex share the width of my svg evenly?

I have problem with my flex div in my portfolio. I have 3 services that I want to feature. They all have a svg image and some text underneath. I tried to give them all a flex: 1 property, but they still don't share the space evenly.
Here is the code:
<div class="flex flex-row">
<div class="px-24 pt-8 flex flex-1 flex-col justify-center items-center text-center">
<img src="/static/media/design.0e806bbe.svg">
<span class="font-montserrat font-bold text-4xl">Design</span>
</div>
<div class="px-24 pt-8 flex flex-1 flex-col justify-center items-center text-center">
<img src="/static/media/code.4871712c.svg">
<span class="font-montserrat font-bold text-4xl">Programmation</span>
</div>
<div class="px-24 pt-8 flex flex-1 flex-col justify-center items-center text-center">
<img src="/static/media/hosting.af9efcf1.svg">
<span class="font-montserrat font-bold text-4xl">Hébergement</span>
</div>
</div>
This is what I get:
PS: I am using TailwindCSS.