如何使div中的元素居中

Question

我尝试将输入字段置于页面中心。 由于某些原因，我为输入字段设置的填充将它们向右移动，我不希望这样。 有人可以帮我解决这个问题吗？ 这是代码。

 .BeWeird_register_container { display: flex; justify-content: center; }.BeWeird_register_wrapper { width: 60%; } input[type=text], select { border: none; width: 100%; padding: 30px 20px; margin: 8px 0; display: inline-block; background-color: #000; color: #BBFB34; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 1.2vw; }

 <div class="BeWeird_register_container"> <div class="BeWeird_register_wrapper"> <div class="BeWeird_login_wrapper"> <div class="login_image"><img src="Images/LoginImage.png" alt="" /></div> <form method="post" action="BeWeird_login.php"> <?php include('errors.php'); ?> <div class="login_form_wrapper"> <div class="input-group"> <input class="login" type="text" placeholder="Username" name="username"> </div> <div class="input-group"> <input class="login" type="password" placeholder="Password" name="password"> </div> <div class="input-group"> <button class="login" type="submit" class="btn" name="login_user">Login</button> </div> </form> </div> </div> </div>

帮助将不胜感激。 提前感谢您。

Answer 1

在我看来，你把display: flex放在了错误容器的 styles 中。 您希望将login_form_wrapper的 DOM 居中。 请记住， flex-direction is set to row`。

这是关于如何使用flex的一个很好的解释。
Flexbox 完整指南

如果我错了，请纠正我，但据我所知，这就是你要找的：
JsFiddle大卫

Answer 2

要在表单中居中输入，请添加style="text-align:center;" 到包含输入的父元素，在本例中为login_form_wrapper class。

此外，如果您选中浏览器中的复选框 (F12)，您将看到div BeWeird_login_wrapper显示的比应有的大。 为简单起见，只需使用此标题MDN web 文档上方的结构并嵌套 div。

Answer 3

谢谢你们的帮助。 代码很好。 它只需要在输入 css 代码 box-sizing:border-box;

像这样：

input.login[type=text], select {
    border:none;
  width: 100%;
  padding: 30px 20px;
  margin: 8px 0;
  box-sizing:border-box;
 background-color: #000;
    color:#FEA6E5 !important;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size:1.2vw;
}

Answer 4

您可以提及使用：

outer-element{
display:flex;
justify-content:center;
align-items:center;
}