在居中的 div 容器内对齐元素

Question

我希望在居中的 div 容器中将我的元素向左对齐。我发现的问题是我使用 text-align 将整个 div 居中，但是当我尝试创建另一个内容容器并且 text-align left 时，它并没有在居中的 div 内将我的内容排列在左侧。

HTML：

<div id="bar-fields">
        <h1><u>Bar Information</u></h1>
          <label>Logo:</label>
              <input type="button" value="upload">
            <br />
              Business Name: <%= f.text_field :name, required: true %>
            <br />
            <div id="bar-description-field">
              <label>Description:</label> <%= f.text_area :description %>
            </div>
            <br />
              Zip: <%= f.text_field :zip %>
            <br />
              <label>State:</label>
              <select>
                <option value="State">State</option>
              </select>
            <br />
            <label>Region:</label> 
              <select>
                <option>All</option>
              </select>
            <br />
              Phone: <%= f.text_field :phone %>
            <br />
              Facebook:  <%= f.text_field :facebook %>
            <br />
              Twitter:  <%= f.text_field :twitter %>
            <br />
              Monday Specials:  <%= f.text_field :mon_special %>
            <br />
              Tuesday Specials:  <%= f.text_field :tue_special %>
            <br />
              Wednesday Specials:  <%= f.text_field :wed_special %>
            <br />
              Thursday Specials:  <%= f.text_field :thu_special %>
            <br />
              Friday Specials:  <%= f.text_field :fri_special %>
            <br />
              Saturday Specials:  <%= f.text_field :sat_special %>
            <br />
              Sunday Specials:  <%= f.text_field :sun_special %>
            <br />

              <%= f.submit "CREATE BAR", class: 'submit', id: 'black-submit' %>
        <% end %>
      </div>

CSS：

#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;
}

Answer 1

您可以使用它来使 div 居中：

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

然后在需要的地方使用text-align:left

在此处阅读更多信息：How to horizontally center a <div> in another <div>?