CODEWITHSUNDEEP
tailwind-css
Julius Goddard
Julius Goddard

Reputation: 347

How to Center Button In Tailwind in a div

How do you center a button in tailwind in a div?

I have tried:

  1. justify-center
  2. items-center
  3. mx-auto
  4. 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>

Upvotes: 8

Views: 45235

Answers (8)

jspru
jspru

Reputation: 1238

I used 'justify-center'.

Ex:

<div class="flex justify-center">
  <button></button>
</div>

Upvotes: 1

Olivier Boiss&#233;
Olivier Boiss&#233;

Reputation: 18113

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

Upvotes: 24

Julius Goddard
Julius Goddard

Reputation: 347

Correction - Having encountered this problem multiple times - NONE of the solutions posted worked.

Adding flex, flex-col and items-center to the parent component does nothing.

The only thing that works for me, is to wrap the button in <p className="text-center"></p> tags, only then the button is centered.

Upvotes: 4

Dixit
Dixit

Reputation: 13046

simplest way using flex:

<div class="px-12 py-12 space-x-2 flex justify-center">
        <a href="" class="py-3 px-3 rounded bg-green-600 text-white font-bold text-2xl hover:bg-green-700">Add X</a>
        <a href="" class="py-3 px-3 rounded bg-green-600 text-white font-bold text-2xl hover:bg-green-700">Add Y</a>
        <a href="" class="py-3 px-3 rounded bg-green-600 text-white font-bold text-2xl hover:bg-green-700">Add Z</a>
    </div>

Upvotes: 1

Pt. Rahikwara
Pt. Rahikwara

Reputation: 11

You can simply use canter tag of html.


Upvotes: 1

N13yx
N13yx

Reputation: 31

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.

Upvotes: 3

Ahmed Shaqanbi
Ahmed Shaqanbi

Reputation: 773

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>

Upvotes: 2

The Silent Coder
The Silent Coder

Reputation: 71

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>

Upvotes: 2

Related Questions