web-dev-qa-db-ja.com

Bootstrap 4、ボタンを中央揃えするにはどうすればよいですか？

<div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-8">
                <div v-for="job in job">


                    <div class="text-center">
                        <h1>{{ job.job_title }}</h1>
                        <p><strong>Google Inc. </strong> - {{ job.location }}</p>
                        <h2><u>Job Description</u></h2>
                    </div>

                    <p v-html="desc"></p>

                    <p class="text-center">Posted: {{ formatDate(job.date_created) }}</p>
                    <button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button>

                </div>

            </div>
            <div class="hidden-sm-down col-md-4"></div>


        </div>

このボタンを中央に配置する方法がわかりません。 BS 3では、センターブロックを使用しますが、BS4のオプションではありません。何かアドバイス？

csstwitter-bootstrapbootstrap-4
50
bbennett36

Bootstrap 4では、text-centerクラスを使用してインラインブロックを整列させる必要があります。

注：親要素に適用するカスタムクラスで定義されたtext-align:center;は、使用しているBootstrapバージョンに関係なく機能します。そしてそれはまさに.text-centerが適用するものです。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>
  </div>
</div>
101
Andrei Gheorghiu

フォームグループを閉じた後、Bootstrapフォームのボタンで中央揃えするために使用する完全なHTMLは次のとおりです。

<div class="form-row text-center">
    <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
 </div>
19
Jaskaran Singh

Bootstrap 4の親コンテナでtext-centerクラスを使用します

12
Serginho

ブートストラップでこれを試してください

コード：

<div class="row justify-content-center">
  <button type="submit" class="btn btn-primary">btnText</button>
</div>

リンク：

https://getbootstrap.com/docs/4.1/layout/grid/#variable-width-content

11
abo-jwad22 Ahmd