对齐居中Div容器内的元素

Question

我想在居中的div容器中将元素向左对齐。 我发现的问题是，我使用text-align来使整个div居中，但是当我尝试创建另一个内容容器并且将text-align左text-align它并没有将我的内容排列在居中的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

在这里阅读更多： 如何将<div>在另一个<div>中水平居中？