我希望在中心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;
}
答案 0 :(得分:2)
您可以使用它来居中div:
#bar-fields {
width: 50%;
margin: 0 auto;
}
然后在需要的地方使用text-align:left
在此处阅读更多内容:How to horizontally center a <div> in another <div>?