Kevin Powell - Community•16mo ago

TAILWIND Checkbox Not Aligning

<div className="flex items-center justify-center h-screen">
        <div className=" border-black rounded border-x-2 border-y-2 w-[20rem] h-[50px]">
        <input type="checkbox" className="mr-2"/>
        
        <div className="text-blue-800 flex justify-center items-center">
          I'm not a robot
        </div>

        </div>
      </div>
    </>

<div className="flex items-center justify-center h-screen">
        <div className=" border-black rounded border-x-2 border-y-2 w-[20rem] h-[50px]">
        <input type="checkbox" className="mr-2"/>
        
        <div className="text-blue-800 flex justify-center items-center">
          I'm not a robot
        </div>

        </div>
      </div>
    </>

The checkbox wont align with the text and the text wont stay in the center. https://playcode.io/1583581

PlayCode.io

Tailwind CSS Playground

Try this online Tailwind CSS Playground playground with instant live preview and console. Easy & Fast. Experiment yourself.

4 Replies

Bardacoon•16mo ago

Idk, do something like this

<div className="text-blue-800 flex justify-center items-center">
        <input type="checkbox" className="mr-2"/>
          <span className="mb-1">text</span>
        </div>

<div className="text-blue-800 flex justify-center items-center">
        <input type="checkbox" className="mr-2"/>
          <span className="mb-1">text</span>
        </div>

But usually checkbox are replaced with a styled box so they look prettier and are easier to manage style-wise

4ngel_._OP•16mo ago

doesnt work can you use playcode?

Bardacoon•16mo ago

yeah, it's centered in playcode

4ngel_._OP•16mo ago

wait wtf

Gaming

Programming

TAILWIND Checkbox Not Aligning