Question

我正在制作一部响应式的游戏＆＃34;游戏＆＃34;我偶然发现了这个：

如何修复此问题以使其居中。

我正在添加我的html和css代码：

＆＃13;

  #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;
    }

＆＃13;

    <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>

＆＃13;

Answer 1

使用上面的代码，只需删除中断标记并将display：block添加到输入中就好了！

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

.container_input{
      display: block;
}

Answer 2

保持它的最简单方法＆＃34;响应＆＃34;是在第二个输入中添加样式，如下所示：

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

如何将输入置于表格中心？

2 个答案: