가운데 맞춤 div 컨테이너 내에 요소 정렬

Question

중심 div 컨테이너 내에서 왼쪽에 요소를 정렬하려고합니다. 내가 찾는 문제는 text-align을 사용하여 전체 div를 가운데에 배치했지만 다른 콘텐츠 컨테이너를 만들고 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

당신은 사업부 중심이 사용할 수

: 당신이

것이란 할 필요가 어디

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

다음 text-align:left를 사용을 d more here : How to horizontally center a <div> in another <div>?