CODEWITHSUNDEEP
htmlcss
TheWonsz
TheWonsz

Reputation: 11

How to center inputs in form?

I'm making a responsive php "game" and I came across this:

Image of My Error

And how to repair this to be centered.

I'm adding my html and css code:

  #box{
    margin-left: auto;
    margin-right: auto;
    width: 100%;

    background-color: white;
  }

  #container{
    width: 100%;
    text-align: center;
  }

    .container_title{
      font-size: 20px;
      font-weight: bold;
    }

    .container_form{
      margin-bottom: 30px;
      margin-top: 30px;
    }

    .container_input{
      margin: auto;
      min-width: 300px;
      font-size: 25px;
      border: solid 1px red;
      outline: none;
      font-family: "SourceCodePro";
      color: #4b545f;
      background: #fff;
      padding: 10px 15px;
      border-bottom: 1px solid transparent;
      text-align: center;
    }

    .container_input:focus{
      border-bottom: 1px solid #41A1F0;
    }

    .container_submit{
      min-width: 350px;
      font-family: "SourceCodePro";
      background-color: transparent;
      border: 2px solid transparent;
      padding: 10px 30px;
      font-size: 20px;
      border-bottom: 1px solid #ddd;
    }

    .container_submit:hover{
      cursor: pointer;
      border-bottom: 1px solid #41A1F0;
    }

    .container_dont{
      margin-top: 20px;
    }

    .container_form_error{
      color: #FF7070;
      font-weight: bold;
    }

    .container_form_good{
      color: #64FF5C;
      font-weight: bold;
    }
    <body>

        <div id="box">

            <div id="container">

                <div class="container_form">
                    <form action="functions/login/index.php" method="post">
                        <input class="container_input" type="text" id="nickname" name="nickname" placeholder="Nickname" maxlength="15" required/>
												<input class="container_input" type="password" id="password" name="password" placeholder="Nickname" required/>

                        <br/><input class="container_submit" type="submit" value="Log In"/>
                    </form>

                </div>

            </div>

        </div>

    </body>

Upvotes: 0

Views: 38

Answers (2)

Mustafa
Mustafa

Reputation: 162

The easiest way to keep it "responsive" is to add the style in the second input, like shown below:

<input style="margin-right: -3px;" class="container_input" type="password" id="password" name="password" placeholder="Nickname" required/>

Upvotes: 0

will
will

Reputation: 2007

Taking the code you have above, just removing the break tags and adding display: block to the inputs seems to do the trick!

https://codepen.io/will0220/pen/WZOdeM

.container_input{
      display: block;
}

Upvotes: 1

Related Questions