In tailwind how to place Text 1 at the center vertically and horizontally without using any padding or margin ? I want to have separate widths for two rows.
<div class="grid grid-row-2 justify-items-center items-center">
<div class="border-2 h-24 "> Text 1 </div>
<div class="border-2 self-center"> Text 2 </div
</div>
https://play.tailwindcss.com/7Zog1vjVEh
You are missing some classes in your code. See correct code below
<div class="grid grid-row-2 justify-items-center items-center">
<div class="border-2 w-24 h-24 justify-center items-center flex">Text 1</div>
<div class="border-2 self-center">Text 2</div>
</div>
I have created a demo for you. https://play.tailwindcss.com/CrUCSx4Fbp
You could use the align-content classes https://tailwindcss.com/docs/align-content : you could add flex flex-wrap content-around classes to your h-24 element, and wrap your text between tags to vertically center it.
<div class="grid grid-row-2 justify-items-center items-center">
<div class="border-2 h-24 flex flex-wrap content-around"><div>Text 1</div></div>
<div class="border-2 self-center">Text 2</div
</div>
https://play.tailwindcss.com/JiPa45W4RR
Related
I'm struggling with TailwindCSS and I'm a bit lost. I'm trying to create a nav with some elements inside, but I want one of the elements to be centered in the middle of the nav, ignoring the other elements inside. I tried this:
<nav class='py-3 z-50 bg-white border-gray-200 shadow px-2 flex flex-wrap items-center justify-between'>
<div id='1' class='flex flex-row border-red-400 border-2'>
<p>Here goes content more larger</p>
<p> than ocuppies a bit mmore</p>
</div>
<div id='2' class="flex justify-center items-center basis-100 place-content-center border-red-400 border-2">
<p>Content that I want in the center on the nav</p>
</div>
<div id='3' class="border-red-400 border-2">
<p>Other content</p>
</div>
</nav>
<div class="flex items-center justify-center">
<p>This is the center</p>
</div>
With justify-between the space is almost what I want (elements 1 and 2 at start and end), but it puts the same space between elements, and de div with id 2 is not centered regarding the nav
Is it possible to maintain the divs 1 and 2 at the end of the nav but centering the div with id 2 ignoring the other elements?
Any help would be appreciated. Thanks in advance
EDIT
I tried another approach that would be the key, but I don't know if it's the right path. I change flex by grid, doing this
<div>
<nav class='py-3 z-50 bg-white border-gray-200 shadow px-2 flex flex-wrap items-center justify-between'>
<div id='1' class='flex flex-row border-red-400 border-2'>
<p>Here goes content more larger</p>
<p> than ocuppies a bit mmore</p>
</div>
<div id='2' class="place-content-center border-red-400 border-2">
<p>Content that I want in the center on the nav</p>
</div>
<div id='3' class="border-red-400 border-2">
<p>Other content</p>
</div>
</nav>
<div #content class="flex items-center justify-center mb-24">
<p>This is the center</p>
</div>
<nav class='py-3 z-50 bg-white border-gray-200 shadow px-2 grid grid-cols-2 md:grid-cols-3 gap-5 items-center'>
<div id='1' class='flex flex-row border-red-400 border-2'>
<p>Here goes content more larger</p>
<p> than ocuppies a bit mmore</p>
</div>
<div id='2' class="place-self-center hidden md:flex border-red-400 border-2">
<p>Content that I want in the center on the nav</p>
</div>
<div id='3' class="place-self-end border-red-400 border-2">
<p>Other content</p>
</div>
</nav>
</div>
And this is the result:
I assume that you simply want the central component somewhat left as shown in the image below.
so I had added a left margin according to the screen size
<nav class='py-3 z-50 bg-white border-gray-200 shadow px-2 flex flex-wrap items-center justify-between'>
<div id='1' class='flex flex-row border-red-400 border-2'>
<p>Here goes content more larger</p>
<p> than ocuppies a bit mmore</p>
</div>
<div id='2' class="flex justify-center items-center basis-100 place-content-center border-red-400 border-2 md:-ml-32 lg:-ml-72">
<p>Content that I want in the center on the nav</p>
</div>
<div id='3' class="border-red-400 border-2">
<p>Other content</p>
</div>
</nav>
<div class="flex items-center justify-center">
<p>This is the center</p>
</div>
Please find the code here
The problem is that I have a title a subtitle and a footer. I would like the subtitle's div to span across the empty space between the title and the footer.
I tried setting h-full to the div but it does not seem to do anything.
export default function ASD() {
return (
<div className="flex flex-col justify-start mx-auto w-9/12 min-h-screen bg-red-300 text-center">
<div className="bg-yellow-200">
<div className="bg-blue-200 text-6xl">
<h1>Title</h1>
</div>
<div className="bg-indigo-500 text-3xl">
<h1>Subtitle</h1>
</div>
</div>
<footer className="mt-auto bg-green-200">Footer</footer>
</div>
);
}
Also, I would like the whole page to cover the entire screen so that the footer is at the bottom of the page.
Your header and subtitle is wrapped inside a div, you need to remove that wrapper div ,and then use flex-1 so that the subtitle div spans accross the entire height of the screen.
<div class="mx-auto flex min-h-screen w-9/12 flex-col justify-start bg-red-300 text-center">
<div class="bg-blue-200 text-6xl">
<h1>Title</h1>
</div>
<div class="flex-1 bg-indigo-500 text-3xl"> //👈 use flex-1 here
<h1>Subtitle</h1>
</div>
<footer class="mt-auto bg-green-200">Footer</footer>
</div>
Output:
Tailwind play link
Try this.
<div className="flex flex-col justify-start mx-auto w-9/12 h-full bg-red-300 text-center">
<div className="bg-yellow-200 flex-1 flex flex-col">
<div className="bg-blue-200 text-6xl">
<h1>Title</h1>
</div>
<div className="bg-indigo-500 text-3xl flex-1">
<h1>Subtitle</h1>
</div>
</div>
<footer className="bg-green-200">Footer</footer>
</div>
I have attached a rough idea of what I am trying to achieve, the dotted line represents the center of the container.
I am trying to center align one div element, then right align a second div within the same row, while both elements are centered horizontally.
Try like this:
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex items-center justify-center border border-dashed">
<div class="flex-1"></div>
<div class="w-32 h-32 bg-red-500"></div>
<div class="flex-1">
<div class="w-20 h-20 bg-green-500 ml-auto"></div>
</div>
</div>
With grid:
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-[minmax(0,1fr),auto,minmax(0,1fr)] items-center border border-dashed">
<div></div>
<div class="w-32 h-32 bg-red-500"></div>
<div class="w-20 h-20 bg-green-500 ml-auto"></div>
</div>
I was trying to create a responsive grid layout with tailwindcss but I could not center the texts vertically in grid. All I could do was center the text horizontally with text-center.
<body>
<div class="grid gap-5 grid-flow-row grid-cols-2 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 text-center ">
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
...
<div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
</body>
Demo in codepen
You can do it with flex. Just add this flex justify-center items-center to every text div, like that:
<div class="border-2 rounded-lg h-20 lg:h-32 flex justify-center items-center">Text</div>
It will make it flex container with children centered both horizontally and vertically.
And you can also remove text-center from wrapper since it will be redundant.
You can use justify-self-center to horizontally center text inside grid column. and self-center to vertically center text/content inside grid column. For added clarity, content-center to vertically center grid Column, aka like a child div inside parent grid container. justify-center for horizontal. The question you have to ask is, do I want to effect the grid column position? or the grid column contents position?
I thought flexbox makes its children having same height, meaning all children will be as tall as the highest (tallest) child and parent makes this by having default value of align-stretch for cross axis (if it is flex-row). In my case it is not like so.
I have following pen:
Codepen link
<div class="flex w-full items-center flex-wrap">
<div class="flex flex-col md:w-1/2 items-center px-16 py-20 bg-red">
<h2 class="marjan-col">Smaller text</h2>
<p>This one has smaller text</p>
</div>
<div class="flex flex-col md:w-1/2 items-center px-16 py-20 bg-blue">
<h2 class="text-white">Bigger text that controls element height</h2>
<p class="text-white">
Blue element has more text thus making red element smaller and unable to fit entire height
</p>
</div>
</div>
Note that taller element (background red) is not having same height as the blue element.
I am using tailwind.css here, but I think code is self explanatory.
Remove items-center class from the wrapper class - this was adding align-items: center to your flexbox and overriding the default stretch behaviour - see demo below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css">
<div class="flex w-full flex-wrap">
<!-- CHANGED HERE -->
<div class="flex flex-col md:w-1/2 items-center px-16 py-20 bg-red">
<h2 class="marjan-col">Smaller text</h2>
<p>This one has smaller text</p>
</div>
<div class="flex flex-col md:w-1/2 items-center px-16 py-20 bg-blue">
<h2 class="text-white">Bigger text that controls element height</h2>
<p class="text-white">
Blue element has more text thus making red element smaller and unable to fit entire height
</p>
</div>
</div>