bootstrap で実装したボタンの中央寄席ができません

Question

bootstrap で実装したボタンの中央寄席ができません

bootstrapでボタンを横方向に中央寄せしたいのですが上手くいきません。何が悪いのか教えていただけますと幸いです。

<section class="sec-recruit">
            <div class="container">
                <h1 class="title">RECRUITMENT<span class="sub-title">団員募集</span></h1>
                <div class="inner">
                    <p>¥¥交響楽団では一緒に演奏できる仲間を募集しています！
                        オーケストラに興味をお持ちのあなた！音楽が好きなあなた！
                        一緒に音楽をはじめて見ませんか？？
                    </p>
                    <button type="button" class="btn btn-secondary">Secondary</button>
                </div>
            </div>
        </section>

.sec-recruit{
  width:100%;
}

.sec-recruit p{
  padding-top:14px;
  line-height:1.2rem;
  font-weight:100;
}

button{
  text-align: center;
  margin:0 auto;
}

Comments

[m.ts10806]

「横方向に中央寄せ」とは。今どうなってるんでしょう。

[m.ts10806]

「うまくいかない」などで伝わる情報量はゼロなので
具体的に起きている現象を記載してください。
https://teratail.com/help/question-tips#questionTips3-4-1

Answer 1

bootstrapでボタンを横方向に中央寄せしたい

いまのコードだと、CSSのセレクタがbuttonなので、bootstrapの.btnに負けてしまい、思ったようなレイアウトが実現できない可能性があります。

button{
  text-align: center;
  margin:0 auto;
}

詳しくは詳細度について調べてみてください。

また、左右のマージンをautoにすることにより中央に寄せる作戦だと思いますが、.btnはdisplay: inline-blockなので、マージンは0になってしまうようです。

ということで、対策として、

• bootstrapの.btnに負けないようにする
• ブロックレイアウトにする

の2点が必要だと思います。

例1

button.btn {
  margin: 0 auto;
  display: block;
}

例2

button {
  margin: 0 auto;
  display: block !important;
}

Answer 2

bootstrapはわかりませんが、buttonをdisplay: block;にするのではだめですか？

Comments

[rzysssipy]

回答いただき有難うございます。
display:block;にしましたが変わらず中央に寄りません。