bootstrap　要素の中央揃えと改行を両立したい

Railsでサインアップ画面を作成しているのですが、要素が左側に寄ってしまっています。

下記の<div class="field form-group">にrowクラスとjustify-content-centerクラスを追加すれば要素は中央になりますが、次はラベルの改行が反映されないです。

これらを両立する方法をご教授いただけますと幸いです。

html
1<div class="container">
2
3<h2>情報のご登録</h2>
4
5<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
6 <%= render "devise/shared/error_messages", resource: resource %>
7
8 <div class="field form-group">
9   <%= f.label :email %><br />
10   <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control col-md-8 col-md-offset-2" %>
11 </div>
12
13 <div class="field form-group">
14   <%= f.label :password %>
15   <% if @minimum_password_length %>
16   <em>(<%= @minimum_password_length %> 文字以上)</em>
17   <% end %><br />
18   <%= f.password_field :password, autocomplete: "new-password", class: "form-control col-md-8 col-md-offset-2" %>
19 </div>
20
21 <div class="field form-group">
22   <%= f.label :password_confirmation %><br />
23   <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control col-md-8 col-md-offset-2" %>
24 </div>
25
26 <div class="actions">
27   <%= f.submit "ご登録" %>
28 </div>
29<% end %>
30
31<%= render "devise/shared/links" %>
32
33</div>

s8_chu

2020/03/29 19:04

素の HTML, CSS を質問文へ追記していただけませんか？その状態での動作確認を試みると以下のような結果となってしまいます。 https://jsfiddle.net/wpeqzoLb/

行動規範の内容に同意します

回答1件

Bootstrapを使っているのでしたら、gridを利用するのはどうですか。
https://cccabinet.jpn.org/bootstrap4/layout/grid#setting-one-column-width

RUBY
1<div class="container">
2  <div class="row">
3  <div class="col" />
4  <div class="col-6">
5
6    <h2>情報のご登録</h2>
7
8    <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
9      <%= render "devise/shared/error_messages", resource: resource %>
10
11      <div class="field form-group">
12        <%= f.label :email %><br />
13        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control col-md-8 col-md-offset-2" %>
14      </div>
15
16      <div class="field form-group">
17        <%= f.label :password %>
18        <% if @minimum_password_length %>
19          <em>(<%= @minimum_password_length %> 文字以上)</em>
20        <% end %><br />
21        <%= f.password_field :password, autocomplete: "new-password", class: "form-control col-md-8 col-md-offset-2" %>
22      </div>
23
24      <div class="field form-group">
25        <%= f.label :password_confirmation %><br />
26        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control col-md-8 col-md-offset-2" %>
27      </div>
28
29      <div class="actions">
30        <%= f.submit "ご登録" %>
31      </div>
32    <% end %>
33
34    <%= render "devise/shared/links" %>
35  </div>
36  <div class="col" />
37  </div>
38</div>