居中 div 不能正常使用 font awesome

Question

我想将整个表单居中并创建一个名为 'center' 的 class 并具有给定的属性。但是在 JSFiddle 中将中心 class 添加到表单后，fontawesome-icons 保持在左侧并且不会移动。它们应该位于 "inside" 文本左侧的输入元素。所以为了给图标腾出位置，我还在左边加了一个padding。

谁能给我解决这个问题的解决方案，因为居中导致两个图标都留在左边？我真的不知道为什么它不起作用并且已经花了很多时间：/

谢谢。

.center{
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
    
    .box {
        position: relative;
        margin-bottom: 20px;
    }
    
    .box .fa {
        position: absolute;
        top: 10px;
        left: 5px;
    }
    
    .box input[type="text"],
    .box input[type="password"] {
        border: 0px;
        border-bottom: 1px solid #ccc;
        text-decoration: none;
        width: 180px;
        padding: 10px;
        padding-left: 25px;
    }

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="center">
<form action="/login" method="POST" class="form">
  <div class="box">
    <i class="fa fa-user" aria-hidden="true"></i>
    <input required name="username" type="text" placeholder="user">
  </div>
  <div class="box">
    <i class="fa fa-key" aria-hidden="true"></i>
    <input required name="password" type="password" placeholder="pass">
  </div>
  <div class="box">
    <input name="submit" type="submit" value="Login">
  </div>
</form>
</div>

Answer 1

.box 元素是 div，因此自然具有父元素的 100% 宽度。

一个简单的解决方案是给它们一个等于您的 input 的固定宽度，并使用 auto:

的左右边距使它们居中

.center{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.box {
    position: relative;
    margin: 0 auto 20px;
    width: 180px;
}

.box .fa {
    position: absolute;
    top: 10px;
    left: 5px;
}

.box input[type="text"],
.box input[type="password"] {
    border: 0px;
    border-bottom: 1px solid #ccc;
    text-decoration: none;
    width: 180px;
    padding: 10px;
    padding-left: 25px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="center">
<form action="/login" method="POST" class="form">
  <div class="box">
    <i class="fa fa-user" aria-hidden="true"></i>
    <input required name="username" type="text" placeholder="user">
  </div>
  <div class="box">
    <i class="fa fa-key" aria-hidden="true"></i>
    <input required name="password" type="password" placeholder="pass">
  </div>
  <div class="box">
    <input name="submit" type="submit" value="Login">
  </div>
</form>
</div>

Answer 2

它的发生是因为

.box .fa {
position: absolute;
top: 10px;
left: 5px;

}

你可以使用初始位置。

居中 div 不能正常使用 font awesome

Centering div does not work properly with font awesome

html

css

center