How do you center a button in tailwind in a div?
I have tried:
justify-center
items-center
mx-auto
content-center
in all cases, the button is stuck on the left hand side.
The h2 and p center no problem.
<div class="container py-10 px-10 mx-0 min-w-full" className="contactdiv">
<h2 class="text-5xl text-white text-center">Contact Us</h2>
<br />
<p class="text-center text-white">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
<button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded items-center">Learn More</button>
</div>
I suggest to use flex flex-col items-center on the container to center children across the y axis.
<div class="container py-10 px-10 mx-0 min-w-full flex flex-col items-center">
<h2 class="text-5xl mb-3 text-black">Contact Us</h2>
<p class="text-black">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
<button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded">Learn More</button>
</div>
Here is the result on Tailwind Play
I used css grid on my solution. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-10 px-10 mx-0 min-w-full grid place-items-center" className="contactdiv">
<h2 class="text-5xl text-black text-center">Contact Us</h2>
<br />
<p class="text-center text-black">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
<button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded items-center">Learn More</button>
</div>
</body>
</html>
Correction - Having encountered this problem multiple times - NONE of the solutions posted work.
Adding flex, flex-col and items-center to the parent component does nothing.
The only thing that works is to wrap the button in tags, only then does the button centre.
Wrap the button in a flex container and justify content to the center. Since the button is the only element in its container
<div class="container py-10 px-10 mx-0 min-w-full">
<h2 class="text-5xl text-white text-center">Contact Us</h2>
<br />
<p class="text-center text-white">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
<div class="flex justify-center">
<button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded items-center">Learn More</button>
</div>
</div>
Just use flex flex-col items-center justify-center in the parent div.
<div class="authButtons basis-1/4 border-4 flex flex-col items-center justify-center">
<button class="font-fa text-3xl border-2">Hey!</button>
</div>
You can check it out in this tailwind demo.
Related
This is the effect I'm trying to reproduce. The button is aligned on the right on the same level as the text. This is the result I want Goal
This is where I am image.
I tried using the grid but that ends up aligning the button with the div containing the text. The text has no padding.
Here's my code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container grid grid-cols-2 gap-32 h-screen">
<div class="border-solid border-red-600 border-2">
<div class="">
<h1 class="font-['Poppins'] font-bold text-5xl ml-0 leading-snug border-2 border-solid pr-0 inline-block">
Appliying for an internship has never been easier!
</h1>
</div>
<div class="justify-end flex">
<a class="btnn py-2 px-4 rounded-md inline-block" href="/blog">
Get Started!</a
>
</div>
</div>
<div
class="border-2 border-solid border-red-500 grid grid-cols-2 gap-4"
>
</div>
</body>
</html>
Hi #krankos
If you want the result as it's show in your Goal image Which you provided above. Then you could try that code which is in snippet. And also there are a lot of examples relate to that How to do that kind of things. Like at one:- Build websites faster with Tailwind CSS
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Applying for an internship has never been easier!</h5>
</a>
<div class="grid justify-end">
<a href="#" class="flex mr-auto px-3 py-2 text-sm font-medium text-center text-white bg-green-500 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Get started!
</a>
</div>
</div>
</body>
</html>
i am trying to show text under image for responsive design.
right now it is showing behind icon. how i can show text below icon.
CODE
<link
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<div class="flex flex-wrap mt-4 border-2 border-gray-500 p-8 m-auto w-1/4 items-center justify-center">
<div class=" absolute fas fa-book-reader text-6xl text-gray-600"></div>
<div class=" text-base"> Caring Enviroment</div>
</div>
You need to remove absolute class
<link
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<div class="flex flex-wrap mt-4 border-2 border-gray-500 p-8 m-auto w-1/4 items-center justify-center">
<div class="fas fa-book-reader text-6xl text-gray-600"></div>
<div class=" text-base text-center"> Caring Enviroment</div>
</div>
Remove absolute or relpace absulte with relative. On this way you can position (top-10 etc.) the box if you want.
https://play.tailwindcss.com/TU6xLsUjj4
I'm trying to vertically center the div with a white border onto the div with a green background. Colors just for show. I cannot figure out why justify-center and items-center do not work. I know I can use margin to achieve what I want but I know there's a better way. I have tried referencing this SO post but have had no luck:Reference Post
Also, if there is a better solution to implement what I want I'm all ears.
My code:
<div class="flex flex-col min-h-screen bg-coolGray-900">
<div class="w-screen justify-center items-center h-screen bg-green-500 ">
<div class="text-center text-white border-2 ">
<h1 class="mb-10 text-6xl font-bold font-lato">Message Here</h1>
<h2 class="mb-8 text-2xl font-semibold font-lato">More Detailed Message Here</h2>
<button class="mx-auto btn btn-learn">Learn More</button>
</div>
</div>
</div>
You haven't displayed your container class as flex, this is why your justifies aren't working.
Add the class flex to your bg-green-500 class.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<section>
<div class="flex flex-col min-h-screen bg-coolGray-900">
<div class="flex w-screen justify-center items-center h-screen bg-green-500 ">
<div class="text-center text-white border-2 w-screen">
<h1 class="mb-10 text-6xl font-bold font-lato">Message Here</h1>
<h2 class="mb-8 text-2xl font-semibold font-lato">More Detailed Message Here</h2>
<button class="mx-auto btn btn-learn">Learn More</button>
</div>
</div>
</div>
</section>
I'm trying to create two side-by-side containers in Tailwind CSS, that grow independently.
My problem is that they are growing at the same time, i.e. when I click on a Question, both containers increase their size. I want only to grow the one from the selected question.
I've also tried with flexbox, but the result is the same.
Here's the code
<div class="mt-10 mx-20 grid gap-14 md:grid-cols-2">
<!-- First container (left) -->
<div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
<h1 class="text-xl font-bold py-2">Container 1</h1>
<div>
<details class="pt-6 pb-4">
<summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
Question
</summary>
<span class="pt-2 pr-8">Answer</span>
</details>
</div>
</div>
<!-- Second container (right) -->
<div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
<h1 class="text-xl font-bold py-2">Container 2</h1>
<div>
<details class="pt-6 pb-4">
<summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
Question
</summary>
<span class="pt-2 pr-8">Answer</span>
</details>
</div>
</div>
</div>
Here's the fiddle
Obs: you have to have the screen at medium breakpoint or higher to see
Simply add items-start to the grid container:
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="mt-10 mx-20 grid gap-14 md:grid-cols-2 items-start">
<!-- First container (left) -->
<div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
<h1 class="text-xl font-bold py-2">Container 1</h1>
<div>
<details class="pt-6 pb-4">
<summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
Question
</summary>
<span class="pt-2 pr-8">Answer</span>
</details>
</div>
</div>
<!-- Second container (right) -->
<div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
<h1 class="text-xl font-bold py-2">Container 2</h1>
<div>
<details class="pt-6 pb-4">
<summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
Question
</summary>
<span class="pt-2 pr-8">Answer</span>
</details>
</div>
</div>
</div>
</body>
</html>
I am beginner webdeveloper.
I have small problem with Tailwind CSS. I need this: https://ibb.co/KL8cDR2
This is my code:
<div class="w-1/2 h-10 rounded-full bg-gray-400" style="background-color:red">404</div>
but it's not working :( How can I make it?
Please help me
<div class="font-bold text-gray-700 rounded-full bg-white flex items-center justify-center font-mono" style="height: 500px; width: 500px; font-size: 170px;">404</div>
This should do the job. Make sure to add a custom class which defines height and width of the circle as well as the font-size and remove font-mono from classes and add your wanted font.
The position absolute way:
<div class="rounded-full border-2 flex p-3 relative">
<div class="absolute top-5 left-8">
4
</div>
</div>
In tailwind.config.js extend inset
theme: {
inset: {
'5': '5px',
'8': '8px'
}
}
The flex way:
<div class="w-20 h-20 rounded-full flex justify-center items-center">
<p>404</p>
</div>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="w-20 h-20 rounded-full border-2 border-black flex justify-center items-center">
<p>404</p>
</div>
</body>
</html>
you can use width and height in this way by pixel or something
<div class="w-[200px] h-[200px] bg-red rounded-full flex
justify-center items-center">
<p>404</p>
</div>
Use rounded class with different options.
<div class="flex">
<div class="m-3 flex h-20 w-20 items-center justify-center rounded-full bg-blue-600">
<p>Circle</p>
</div>
<div class="m-3 flex h-20 w-20 items-center justify-center rounded-md bg-blue-600 text-center">
<p>Rounded Square</p>
</div>
</div>
Output: