Tailwind: flexbox can't center horizontally when width is 1/2

user_4759176 0
Viewed 1206

I have this code

<template>
  <div class = "signup-form  rounded
            flex flex-col  items-center justify-center
              ">
    Signup

    <FormField placeholder="Username"/>

    <FormField placeholder="Email"/>

    <FormField placeholder="Password"/>

  </div>
</template>

It shows this:

enter image description here

However I want to set the width to half of the page width. When I try this:

<template>
  <div class = "signup-form  rounded w-1/2
            flex flex-col  items-center justify-center
              ">
    Signup

    <FormField placeholder="Username"/>

    <FormField placeholder="Email"/>

    <FormField placeholder="Password"/>

  </div>
</template>

I get this:

enter image description here

Why does it happen? How do I fix it?

EDIT:

enter image description here

The parent component is App.vue:

<template>
  <div id = "app"
       class=" h-screen font-sans leading-normal tracking-normal mt-10">
    <Header/>

    <div class="flex flex-col md:flex-row">

      <div class="  main-content flex-1   mt-12 md:mt-12 pb-24 md:pb-5 p-5">

        <router-view/>
      </div>
    </div>

    <Footer/>
  </div>

</template>
tailwind-css css html
2 Answers

Just need to add classes to appropriate tags. See demo.

<div class="flex justify-center">
  <form action="" class="h-96 rounded bg-gray-200 w-1/2"></form>
</div>
user_53261910

now here is what i would do, this is the new code:

{/* now add a new div and put signup and formfield in that new div, the wrapper div will act as a container and now you center the div inside, and on that new div element add display: flex, and position it with justify-content or align-items */}

 <template>

 <div class = "signup-form  rounded w-1/2 flex flex-col  items-center justify-center"> 
 
 <div class="newDiv"> 

   <p>Signup</p>

   <FormField placeholder="Username"/>

   <FormField placeholder="Email"/>

   <FormField placeholder="Password"/>
  </div>
 </div>
</template>
user_135255940
Related