I can't seem to find a working way for vertically & horizontally centering a div when using tailwindcss.
This is my current code that doesn't particularly works :
<div class="absolute flex items-center justify-center">
<Contact />
</div>
If you have a header and you want to ignore the header and center the content the code goes like:
<div>
<div className="flex h-screen flex-col bg-gray-100">
<header className="text-white text-center fixed top-0 left-0 right-0 bg-blue-600">
Header
</header>
<main className=" flex flex-1 justify-center items-center">
<div className="shadow bg-white rounded-md w-full text-center">
Content
</div>
</main>
</div>
</div>
Try with this example
something like <div class="grid place-items-center h-screen">
Related
<div className="carousel w-full">
<div id="slide1" className="carousel-item relative w-full">
<img src="/images/stock/photo-1625726411847-8cbb60cc71e6.jpg" className="w-full" />
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
❮
❯
</div>
</div>
<div id="slide2" className="carousel-item relative w-full">
<img src="/images/stock/photo-1609621838510-5ad474b7d25d.jpg" className="w-full" />
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
❮
❯
</div>
</div>
<div id="slide3" className="carousel-item relative w-full">
<img src="/images/stock/photo-1414694762283-acccc27bca85.jpg" className="w-full" />
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
❮
❯
</div>
</div>
<div id="slide4" className="carousel-item relative w-full">
<img src="/images/stock/photo-1665553365602-b2fb8e5d1707.jpg" className="w-full" />
<div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
❮
❯
</div>
</div>
</div>
I want to know that is it possibe to do that.I tried a lot to find the solution, but I couldn't. when i look for solution statement in google there is no website to showcase my problem.If anyone know about it please help me to reach out the problem and give a chance to make a better ui .
I have created an array of items and mapped them in Vue but I can't make them to flex-row using Tailwind CSS maybe there is something I don't know about in tailwind css flex-row feature
<div class="bg-white mt-5 rounded-tr-md rounded-tl-md">
<!-- Filter menus -->
<div
v-for="filter in filterTypes"
:key="filter.type"
class="flex flex-row items-center px-5 py-4"
>
<div class="">{{ filter.type }}</div>
</div>
<!-- Transactions According to Pages-->
<div></div>
</div>
You should place flex to the parent element, and there's no need to flex-row since flex direction is row by default :
<div class=" bg-white mt-5 rounded-tr-md rounded-tl-md">
<!-- Filter menus -->
<div class="flex items-center">
<div
v-for="filter in filterTypes"
:key="filter.type"
class=" px-5 py-4"
>
<div class="">{{ filter.type }}</div>
</div>
</div>
<!-- Transactions According to Pages-->
<div></div>
</div>
I modify the tailwind elements carousel with two columns left column with content and a right column with image. All functionality is correct but the problem is responsivity.
How can I modify this carousel so that I change the resolution to md or sm I get columns vertical?
I tried to do flex flex-row and when i change the resolution to md or sm to be flex flex-col and nothing changed the same with grid grid-cols-2 and after changing to md and sm to grid-cols-1
This is my code
<div id="carouselExampleCaptions" class="carousel slide relative" data-bs-ride="carousel">
<div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4">
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner relative w-full overflow-hidden">
<div class="carousel-item active relative float-left w-full">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg"
class="block w-1/4 h-96 float-right mr-80"
alt="..."
/>
<div class="carousel-caption hidden md:block absolute text-left h-96 ">
<h1 class="font-bold text-4xl lg:text-6xl text-blue-900 leading-tight font-poppins pb-4 ">SOME TEXT</h1>
<p class="text-gray-500">Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item relative float-left w-full">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg"
class="block w-1/4 h-96 float-right mr-80"
alt="..."
/>
<div class="carousel-caption hidden md:block absolute text-left h-96">
<h1 class="font-bold text-4xl lg:text-6xl text-blue-900 leading-tight font-poppins pb-4">SOME TEXT 1</h1>
<p class="text-gray-500">Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item relative float-left w-full">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg"
class="block w-1/4 h-96 float-right mr-80"
alt="..."
/>
<div class="carousel-caption hidden md:block absolute text-left h-96">
<h1 class="font-bold text-4xl lg:text-6xl text-blue-900 leading-tight font-poppins pb-4">SOME TEXT 2</h1>
<p class="text-gray-500">Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button
class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0 text-black"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon inline-block bg-no-repeat" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0 text-black"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="next"
>
<span class="carousel-control-next-icon inline-block bg-no-repeat" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I tried to position the dropdown to the top of the page using Tailwind CSS and z-index.
But it goes behind of other elements in the grid
image
Code Snipets
<div class="flex flex-col gap-y-4">
<h1 class="text-3xl font-semibold text-left font-display sm:text-4xl">
Following
</h1>
<div class="flex flex-col w-full h-full gap-4 p-4 bg-white border border-gray-200 rounded shadow-md">
<h1 class="mb-3 text-xl font-semibold text-left font-display">
Legislators
</h1>
<div class="flex flex-col items-between">
<div class="relative z-10 grid gap-4 mb-5 xxs:grid-cols-1 xs:grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3">
<FollowingCard
v-for="govId in legislatorsFollowed"
:key="govId"
class="w-full sm:w-auto"
:legor-id="govId"
/>
</div>
</div>
</div>
FollowingCard.vue
person
{{ name }}
{{ role }} | {{ party }} | {{ state }} of {{ country }} {{showDropdown}}
more_vert
<div v-if="showDropdown" class="absolute top-0 left-0 z-40 flex flex-col py-1 mt-8 overflow-y-auto bg-white border border-gray-200 rounded-md shadow-sm max-h-40" data-testid="sessionDropdownBtn">
<button
v-for="session in topics"
:key="session"
class="relative z-50 flex items-center justify-start w-full px-4 py-2 text-sm text-left capitalize hover:bg-gray-100 font-body min-w-max"
>
{{ session }}
</button>
</div>
</button>
</div>
</transition>
</div>
In my vuejs component, I have a form with submit button and a cancel button.
I want my buttons to align right
Following is my current code
<template slot="modal_actions">
<div class="flex items-center justify-end">
<close-overlay class="h-full" identifier="addNewScheduleModal">
<cs-button variant="blank">Cancel</cs-button>
</close-overlay>
<disables-submit-on-errors
:identifier="identifier"
#proceed="addNewSchedule"
>
<loading-button ref="submitBtnSave" size="normal">
Save & Close
</loading-button>
</disables-submit-on-errors>
</div>
</template>
Even though I'm using justify-end class, still the button are aligned left...
I'm struggling to find what I'm doing wrong and align them right....
I'm using tailwind-css
Assuming that your cancel button is at left and loading button is at right of cancel button.
Then there are two ways,
you can change the order of buttons inside div like this:
<template slot="modal_actions">
<div class="flex items-center justify-end">
<loading-button ref="submitBtnSave" size="normal">
Save & Close
</loading-button>
<disables-submit-on-errors
:identifier="identifier"
#proceed="addNewSchedule"
>
<close-overlay class="h-full" identifier="addNewScheduleModal">
<cs-button variant="blank">Cancel</cs-button>
</close-overlay>
.
.
</div>
</template>
You can change the flex-direction to row-reverse by adding class flex-row-reverse to the div. I have created a similar example below for understanding purpose.
<script src="https://cdn.tailwindcss.com"></script>
<div class="space-y-4">
<h3>Before</h3>
<div class="flex items-center justify-end h-96 w-full bg-red-200 space-x-10">
<div class="h-56 w-1/3 bg-red-700">Cancel Button</div>
<div class="h-56 w-1/3 bg-green-700">Loading Button</div>
</div>
<h3>After</h3>
<div class="flex flex-row-reverse items-center justify-end h-96 w-full bg-red-200 space-x-10">
<div class="h-56 w-1/3 bg-red-700">Cancel Button</div>
<div class="h-56 w-1/3 bg-green-700">Loading Button</div>
</div>
</div>