Html 将居中Div容器中的元素左对齐

我希望在一个居中的div容器中将元素向左对齐。我发现的问题是，我使用了

text align

将整个div居中，但当我尝试创建另一个内容容器和

text align

left时，它并没有将我的内容在居中div中左对齐

HTML:

---

可以使用此选项将div居中：

#bar-fields {
    width: 50%;
    margin: 0 auto;
}

然后在需要时使用

文本对齐：left

---

阅读更多信息：

我添加了一个新的

Div

，带有Css属性

text align:left

。它通过检查链接工作

#bar-fields {
    text-align: center;
}


#bar-description-field textarea {
    height: 100px;
    width: 250px;
    vertical-align: middle;
}


#bar-fields input[type="button"] {
    margin-bottom: 20px;
}

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

#bar-fields select {
    margin-bottom: 20px;
}

#bar-fields {
    width: 50%;
    margin: 0 auto;
}