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
Related
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>
Here what I've now:
and how it should looks:
<div class="overflow-auto flex flex-col h-full">
<div class="flex flex-1 flex-col px-7 divide-y-2 divide-metal bg-white">
<div
v-for="item in items"
:key="item.id"
:item="item"
class="flex-1 py-4 lg:py-8"
/>
</div>
<div class="flex flex-col bg-white lg:bg-gray-light">
<div class="!bg-white lg:!bg-gray-light lg:border-b-2 lg:border-metal">
<template #content>
<h4
class="h4 uppercase !font-black !text-[26px] 2xl:!text-[36px] leading-10 tracking-[-0.43px]"
v-text="$t('We Also Recommend')"
/>
</template>
</div>
<div class="flex flex-col px-7 divide-y-2 divide-metal">
<div
v-for="product in recommendProducts"
:key="product.sku"
:item="product"
class="flex-1 py-4 lg:py-8"
/>
</div>
</div>
</div>
<div class="sticky top-0 bottom-auto">
<div class="p-10">
<div class="desktop-only flex justify-between items-center pb-10 uppercase">
<p
class="subtitle1"
v-text="$t('Subtotal')"
/>
<div
:value="totals.subtotal"
class="subtitle1"
/>
</div>
<div class="flex flex-col">
<div
v-text="$t('Proceed to Checkout')"
class="btn btn--lg btn--black mb-3.5 text-[15px]"
/>
</div>
</div>
</div>
</div>
And the problem is that bottom div should cover products and section 'We also recommend' with products should have scroll. Now bottom div extends beyond the view. On bottom div I've position: sticky and on section 'We also recommend' overflow: auto. Where's the problem and how to fix it?
If I understand your problem correctly, the bottom sheet does cover the last part of the scrolling content, right? There is an easy solution:
Just add
padding-bottom: XXpx; # XX == size of sticky bottom sheet
to the scroll container
I am trying to position icon to the left side of a Link and have the text centered at the same time.
<div className="max-w-screen-2xl mx-auto sm:px-6 lg:px-8">
<Link
href="#"
className="px-6 py-3 mt-2 flex justify-center text-center"
>
<DocumentTextIcon
className="ml-1 mt-1 -mr-1 h-10 w-10"
aria-hidden="true"
/>
<p>
Some random text </p>
</Link>
</div>
With this the icon is in the middle with the text. I can push to the right with margin left but then it is not dynamic. Any idea how I can push the icon to the left and it remains dynamic?
Try this way:
<div class="my-10 flex items-center justify-center bg-gray-100 w-40">
<div class="flex-1">
<span class="mr-auto">icon</span>
</div>
<p>text</p>
<div class="flex-1"></div>
</div>
<div class="my-10 flex items-center justify-center bg-gray-100 w-80">
<div class="flex-1">
<span class="mr-auto">icon</span>
</div>
<p>with long text</p>
<div class="flex-1"></div>
</div>
Demo
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
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>