css rails bootstrap ボタンだけ中央揃えにならない

前提・実現したいこと

railsのerbとhtml,cssでフォームの見た目を作っていたのですが、ボタン要素だけ中央揃えになりません。
現在、画像のような状態になっています。ボタンも中央揃えしたいです。

発生している問題・エラーメッセージ

ボタンだけ中央揃えにならない

該当のソースコード

HTML
1   <div class="panel panel-default">
2              	<div class="panel-heading">
3              		<p class="text-center panel-title">通知設定</p>
4              	</div>
5              	<div class="panel-body notice_button">
6                  <div class="notice_setting">
7                  <%= form_for(@user, url:{controller:'users', action:'notify_setting_update'}) do |f| %>
8                    <%= f.fields_for :user_groups, @user.user_groups.where(team_id: @current_team_id) do |ug| %>
9                      <% if ug.object.group.group_name != "共通" %>
10
11                         <p class="text-center"><%= ug.label :グループ名： %><%= ug.object.group.group_name %></p>
12                          <br>
13                          <!-- 現在のLINE通知設定に応じてセレクトボックスの表示内容切替 -->
14                          <% if ug.object.notification_allowed == true %>
15                          <p class="text-center">  <%= ug.label :LINE通知設定： %><%= ug.select :notification_allowed, [["有効", true], ["無効", false]] %></p>
16                          <% else %>
17                            <p class="text-center"> <%= ug.label :LINE通知設定： %><%= ug.select :notification_allowed, [["無効", false], ["有効", true]] %></p>
18                          <% end %>
19                          <br>
20                          <!-- 現在のメール通知設定に応じてセレクトボックスの表示内容切替 -->
21                          <% if ug.object.mail_allowed == true %>
22                          <p class="text-center">  <%= ug.label :メール通知設定： %><%= ug.select :mail_allowed, [["有効", true], ["無効", false]] %></p>
23                          <% else %>
24                          <p class="text-center">  <p class="text-center"><%= ug.label :メール通知設定： %><%= ug.select :mail_allowed, [["無効", false], ["有効", true]] %></p>
25                          <% end %>
26
27                      <% end %>
28                      <br>
29                    <% end %>
30                    <!-- グループ未所属の場合の記述 -->
31                    <% if @user_groups.blank? %>
32                    <p class="text-center"><%= "グループに所属していません。" %></p>
33                    <% elsif @user_groups.count === 1 && @group.group_name === "共通" %>
34                      <p class="text-center"><%= "編集可能なグループはありません。" %></p>
35                    <!-- 通知設定更新ボタン -->
36                    <% else %>
37                    <div class="ssss">  <%= f.submit "勤怠通知設定更新", class: "button btn btn-success center-block" %></div>
38                    <% end %>
39                  <% end %>
40
41                </div>
42            	</div>
43            </div>

css
1.panel-body.notice_button{
2  text-align:center;
3}
4
5.notice_setting{
6  text-align:center;
7}
8
9.ssss{
10text-align:center;  
11}

試したこと

<p class="text-center"></p>も効かず、親要素と思われる<div>にtext-align:center; を付けましたがびくともしません。また、bootstrapのボタンの中央寄せのcenter-blockも効きませんでした。もしやrailsで条件分岐しているからでしょうか？

補足情報（FW/ツールのバージョンなど）

bootstrapのボタンのデフォル設定がいけないっぽいです。
cromeの開発者ツールで見たところ、
.button {
float: left;
margin: 0;
}
.center-block {
display: block;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
になっていました。
勝手に左寄せにされています。
しかし、float:leftを消したところで変わりませんでした…。

初心者で至らない点があると思いますがよろしくお願いします。

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

回答2件

自己解決

完全にBootstrapの問題でした。ボタンのデフォルト設定をカスタムしたら上手くいきました。

before

HTML
1<%= f.submit "勤怠通知設定更新", class: "button btn btn-success center-block" %>

after

HTML
1<%= f.submit "勤怠通知設定更新", class: "button_custom btn btn-success center-block" %>

css
1.button_custom {
2    margin: 0;
3    margin-left: auto;
4    margin-right: auto;
5}

cssは上記のものを書くだけで中央寄せになりました。
まだ原理がよく分かりませんがひとまず中央に寄ってよかったです。

投稿2020/04/28 09:20

chocolate_pie

総合スコア26

<p class="text-center></p>が効かないのは「"」が1つ足りないからかもしれません。

<%= f.submit "勤怠通知設定更新", class: "button btn btn-success center-block" %>
↓
<p class="text-center"><%= f.submit "勤怠通知設定更新", class: "button btn btn-success" %></p>

if文全体を、<div class="panel-footer">などのdivで囲ってtext-align: center;を指定、

<p>を削除してみてもいいかもしれません。