<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
Related
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
I have a main title, logo, and subtitle and want to put the subtitle at the center whatever the logo's width.
With the current code sub title's position changes according to the logo's width and does not align with to the main header
<div class="flex justify-between items-center p-4 pt-10">
<div class="w-40"></div>
<p mode="" class="pb-8 w-72 flex justify-center text-white">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div class="w-screen bg-red-500 bg-opacity-50 mb-5 py-5 text-white flex justify-between">
<img src="{{ 'storage/'.$logo}}" class="h-14 pl-24" alt="">
<h1 class="block text-3xl font-semibold text-center my-auto">xxxxx</h1>
<div class="w-72"></div>
</div>
How to deal with it?
Easiest way to solve this issue is using position: absolute property on image tag. Use position property and remove extra unwanted div's. Try following code, I hope it will solve your issue.
<div class="flex justify-center bg-red-200 items-center p-4 pt-10">
<p mode="" class="pb-8 text-white">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</div>
<div class="w-screen bg-red-500 bg-opacity-50 mb-5 py-5 text-white flex justify-center relative">
<img src="https://placehold.it/150x150?text=logo" alt="" class="absolute left-0 top-0 h-14 pl-24 pt-4">
<h1 class="block text-3xl font-semibold text-center my-auto">xxxxx</h1>
</div>
You are trying to adjust the logo and subtitle with flex justifyContent so the logo width changes will cause movement of your subtitle.
There are many options in css for fixing this, one of them is to use absolute position for your img element:
<div class="w-screen bg-red-500 bg-opacity-50 mb-5 py-5 text-white flex justify-between">
<img src="{{ 'storage/'.$logo}}" class="absolute left-0 top-0 h-14 pl-24 pt-4" alt="">
<h1 class="block text-3xl font-semibold text-center my-auto">
Subtitle
</h1>
</div>
I'm trying to code as below
https://play.tailwindcss.com/5x8mBABcsW
How I can place the text over the circle image? I need the text centered and rounded on the bottom of the image.
I also want to be able to increase size of the image and everything should stay in proportion.
Something like this
<div class="relative w-40 h-40 rounded-full overflow-hidden">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="object-cover w-full h-full" />
<div class="absolute w-full py-2.5 bottom-0 inset-x-0 bg-blue-400 text-white text-xs text-center leading-4">this is a text</div>
</div>
Height of bottom element is set by paddings (but you can change it with height), image size handled by parent's w-40 h-40 - you may change them.
import React from 'react';
import hero from '../assets/img/hero-bg.jpg';
const Hero = () => {
return (
<div className='w-full h-screen'>
<img
className='top-0 left-0 w-full h-screen object-cover'
src={hero}
alt='/'
/>
<div className='bg-black/30 absolute top-0 left-0 w-full h-screen' />
<div className='absolute text-2xl md:text-7xl text-white top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
<p className='tex-red-700'>I am Morgan Freeman</p>
</div>
</div>
);
};
export default Hero;
<div class="relative w-40 h-40 overflow-hidden rounded-full">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="rounded-full w-full h-full" />
<div
class="absolute w-full py-3 bottom-0 inset-x-0 bg-blue-400 text-white text-xs text-center leading-4 hover:translate-y-1 delay-500">this is a text</div>
</div>
OR-
<div class="relative w-40 h-40">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="rounded-full w-full h-full" />
<div class="absolute w-full h-full top-0 left-0 rounded-full bg-blue-400 text-white text-xs flex justify-center items-center opacity-0 hover:opacity-90">this is a text</div>
</div>
I think you will try with this code-
Also, you will change or adjust values-
I am currently working with tailwind to create a log in form.
The HTML looks like so:
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<title>Test</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
</head>
<body style="height: 100%; width: 100%;">
<div class="w-full h-full flex flex-col p-5 md:flex-row md:space-x-2">
<div class="w-full h-1/4 flex justify-center items-center md:w-1/2 md:h-full">
</div>
<div class="w-full h-3/4 p-2 md:w-1/2 md:h-full">
<div class="h-10 flex justify-around items-center mb-1 space-x-2">
<a class="h-full w-full">
<div class="flex h-full w-full justify-center items-center text-center text-lg border rounded-lg border-red-900">
<span>Log in</span>
</div>
</a>
<a class="h-full w-full">
<div class="flex h-full w-full justify-center items-center text-center text-lg border rounded-lg border-red-900">
<span class="">Sign up</span>
</div>
</a>
</div>
<div style="height: calc(100% - 2.5rem) !important" class="p-2 border rounded-lg border-red-900 shadow-2xl">
<div class="w-full h-full flex relative">
<form class="w-full h-full">
<div style="height: calc(100% - 2.5rem) !important" class="w-full h-full flex flex-col justify-center overflow-auto">
<div class="w-3/4 my-3 mx-auto flex flex-col justify-center">
<label class="w-full">
<span class="font-mono ml-3">Email</span>
<input class="w-full px-3 border rounded-lg border-red-700 h-8 focus:outline-none focus:ring-1 focus:ring-red-700 focus:z-10" type="text"
placeholder="user#mail.com" required autofocus>
</label>
</div>
<div class="w-3/4 my-3 mx-auto flex flex-col justify-center">
<label class="w-full">
<span class="font-mono ml-3">Password</span>
<input class="w-full px-3 border rounded-lg border-red-700 h-8 focus:outline-none focus:ring-1 focus:ring-red-700 focus:z-10" type="password"
placeholder="********" required>
</label>
</div>
<div class="w-3/4 mx-auto text-right text-red-700">
<a>Forgot password?</a>
</div>
</div>
<div class="text-red-700 m-auto h-10 w-3/4 absolute bottom-0 inset-x-0 text-center border rounded-lg">
<button class="font-mono h-full w-full focus:bg-red-700 focus:text-white focus:outline-none focus:ring-0 border rounded-lg border-red-700 hover:bg-red-700 hover:text-white"
type="submit">Log in</button> <!-- [disabled]="!loginForm.valid" -->
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
The problem
As you can see, in the parent div, it contains the class overflow-auto. The issue is that when the overflow is activated, part of the first child is not shown for some reason. When removing the justify-center (also in the parent div) this issue is no longer a problem, however I want the content to be vertically centered.
Please see the following image to get a graphical idea. As the image shows, the scrollbar is at its top limit, however the first child is only partly displayed.
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.