-1

body{
    background-color: #354457;
    color: #fff;
}
.title{
    margin-top: 30px;
}
#container{
    max-width: 150px;
    margin: 0 auto;
}
.login_container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
<div id="container">
    <div class="login_container">
        <p class="title">WELCOME</p>
        <p class="subtitle">LET'S GET STARTED</p>
        <input type="text" value="" placeholder="Username" required>
        <br>
        <input type="password" placeholder="Password">
        <br>
        <button>Login</botton>
    <div>
<div>

When I use the flexbox, I have no idea why its properties cannot work. It seems "justify-content" is working but not the "align-items". Can anyone help me out?

Jaswinder Kaur
  • 1,606
  • 4
  • 15
Rebecca.L
  • 1
  • 1

1 Answers1

-1

The align-items property in CSS controls the alignment of items on the Cross Axis, in the other hand justify-content defines how the browser distributes space between and around content items along the main-axis of a flex container.

You will need to extend the max-width of your container div, and changing the direction of flex box to column then you can see your align-items works correctly

body{
    background-color: #354457;
    color: #fff;
}
.title{
    margin-top: 30px;
}
#container{
    max-width: max-content;
    margin: 0 auto;
}
.login_container{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}
<div id="container">
    <div class="login_container">
        <p class="title">WELCOME</p>
        <p class="subtitle">LET'S GET STARTED</p>
        <input type="text" value="" placeholder="Username" required>
        <br>
        <input type="password" placeholder="Password">
        <br>
        <button>Login</botton>
    <div>
<div>
Yasin Satvati
  • 11
  • 2