Html 将跨距字段向左对齐，同时将表单中心对齐

我遇到了一个问题，我在容器上使用

文本对齐

将其中的所有内容居中，但希望将

元素在居中的容器中向左对齐。我已经尝试在css中隔离span元素，并使用

text align:left但没有取得任何成功。我觉得这是一个简单的解决方案，目前正在我的脑海中闪过，但希望它可以很容易地解决

HTML:

我相信这个片段可以满足你的需要。我只是给
表单字段
div设置了一个宽度，并为那些
span
元素添加了一些样式，使它们可以拉伸该div的整个宽度，但要左对齐


#条码注册容器h1{
文本对齐：居中；
}
#表单字段{
宽度：340px；
文本对齐：居中；
背景色：#fff；
保证金：0自动；
填充：20px；
}
#表单字段输入[类型=电子邮件]{
字体大小：27px；
边缘底部：20px；
}
#表单字段输入[类型=密码]{
字体大小：27px；
边缘底部：10px；
}
.表格标签跨度{
显示：内联块；
文本对齐：左对齐；
颜色：#000；
宽度：100%；
左边距：5px；
}
#提交{
边缘顶部：20px；
宽度：300px；
高度：30px；
背景色：#000；
颜色：#fff；
字体大小：15px；
边界：无；
}

登记
电子邮件




密码




要将
左对齐，您需要将它们左对齐，并且在版本中，您必须使用
显示：块
。实际上，您走的方向是正确的，您刚刚错过了
display:block
。使用
display:block
将使您的
像
或
一样充当块元素，然后它将更好地尊重对齐特性

span{
    text-align:left;
    display:block;
    margin-left:50px;// adjust yourself. Was just playing around with it.
}

#bar-registration-container h1{
    text-align: center;
}

#form-fields {
    text-align: center;
    background-color: #fff;
    margin: 0 auto;
    padding: 20px;
}


#form-fields input[type=email] {
    font-size: 27px;
    margin-bottom: 20px;
}

#form-fields input[type=password] {
    font-size: 27px;
    margin-bottom: 10px;
}

.form-label span {
    color: #000;
    margin-right: 10px;
}

#submit {
    margin-top: 20px;
    width: 300px;
    height: 30px;
    background-color: #000;
    color: #fff;
    font-size: 15px;
    border: none;
}

span{
    text-align:left;
    display:block;
    margin-left:50px;// adjust yourself. Was just playing around with it.
}