I want to make multiple divs inside a div vertically aligned. They should start at the top and have space in between evenly.

This works for me but the child-divs are starting at the top-left side of the parent div (see first picture):

 <div className="flex-col items-center justify-center h-screen w-full">
                    <div>
                        <input type='text' placeholder='Game Code' onChange={(event) => setRoomCode(event.target.value)} />
                        <button className="text-white ml-3" type="submit" onClick={handleEnterCode}>JOIN GAME</button>
                    </div>
                    <div>
                        <h1 className="text-white">OR</h1>
                    </div>
                    <div>
                        <button className="text-white" type="submit" onClick={e => setShowForm(true)}>CREATE GAME</button>
                    </div>
                    <div>
                        <form onSubmit={handleLogout}>
                            <button className="text-white" type="submit">logout</button>
                        </form>
                    </div>
                </div>

When I use "flex" - the problem is - that it places my child-divs very far at the bottom. (See in the second picture).

First picture

 <div className="flex-col flex items-center justify-center h-screen w-full">
                    <div>
                        <input type='text' placeholder='Game Code' onChange={(event) => setRoomCode(event.target.value)} />
                        <button className="text-white ml-3" type="submit" onClick={handleEnterCode}>JOIN GAME</button>
                    </div>
                    <div>
                        <h1 className="text-white">OR</h1>
                    </div>
                    <div>
                        <button className="text-white" type="submit" onClick={e => setShowForm(true)}>CREATE GAME</button>
                    </div>
                    <div>
                        <form onSubmit={handleLogout}>
                            <button className="text-white" type="submit">logout</button>
                        </form>
                    </div>
                </div>

Second picture

CodePudding user response：

All you need is a parent container class with the following properties.

.parent-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<div  className="flex-col items-center justify-center h-screen w-full">
<div>
    <input type='text' placeholder='Game Code' />
    <button className="text-white ml-3" type="submit" onClick={handleEnterCode}>JOIN GAME</button>
</div>
<div>
    <h1 className="text-white">OR</h1>
</div>
<div>
    <button className="text-white" type="submit">CREATE GAME</button>
</div>
<div>
    <form onSubmit={handleLogout}>
        <button className="text-white" type="submit">logout</button>
    </form>
</div>
</div>

CodePudding user response：

My desired outcome would be:

-------------------------
|          div          |
|                       |
|          div          |
|                       |
|          div          |
-------------------------

I don't use CSS files as I am using tailwind:

It looks like this currently

<div className="flex-col flex items-center justify-center h-full w-full">
                    <div>
                        <input type='text' placeholder='Game Code' onChange={(event) => setRoomCode(event.target.value)} />
                        <button className="text-white ml-3" type="submit" onClick={handleEnterCode}>JOIN GAME</button>
                    </div>
                    <div>
                        <h1 className="text-white">OR</h1>
                    </div>
                    <div>
                        <button className="text-white" type="submit" onClick={e => setShowForm(true)}>CREATE GAME</button>
                    </div>
                    <div>
                        <form onSubmit={handleLogout}>
                            <button className="text-white" type="submit">logout</button>
                        </form>
                    </div>
                </div>

... leading into this result:

current output