Html 定心div不能与font-some一起正常工作

问题:

我想将整个表单居中，并使用给定的属性创建了一个名为“center”的类。但是在JSFIDLE中将中心类添加到表单之后，图标保持在左侧并且不移动。它们应该位于文本左侧的输入元素的“内部”。因此，为了给图标让位，我还在左边添加了一个填充

有人能给我解决这个问题的办法吗？因为居中，两个图标都留在左边？我真的不知道为什么它不起作用，而且已经花了这么多时间：/

谢谢

.center{
文本对齐：居中；
左边距：自动；
右边距：自动；
}
.盒子{
位置：相对位置；
边缘底部：20px；
}
.box.fa{
位置：绝对位置；
顶部：10px；
左：5px；
}
.box输入[type=“text”]，
.box输入[type=“password”]{
边界：0px；
边框底部：1px实心#ccc；
文字装饰：无；
宽度：180px；
填充：10px；
左侧填充：25px；
}

---

box元素是

div

s，因此自然具有父元素100%的宽度

一个简单的解决方案是给它们一个与

输入相同的固定宽度，并使用
auto
的左右边距将它们居中：


.center{
文本对齐：居中；
左边距：自动；
右边距：自动；
}
.盒子{
位置：相对位置；
保证金：0自动20px；
宽度：180px；
}
.box.fa{
位置：绝对位置；
顶部：10px；
左：5px；
}
.box输入[type=“text”]，
.box输入[type=“password”]{
边界：0px；
边框底部：1px实心#ccc；
文字装饰：无；
宽度：180px；
填充：10px；
左侧填充：25px；
}

发生这种情况是因为

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

}

您可以使用位置初始值