Bootsrap 4、ボタンの中央揃えはどうすればできますか？

Question

<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のオプションではありません。何かアドバイス？

Answer 1

の親コンテナであなたは、インラインブロックを揃えるためにtext-centerクラスを使用する必要があります。

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

Answer 2

使用text-centerクラスブートストラップ4ではブートストラップ4

Answer 3

私は、フォーム・グループ アドオンを閉じた後bootsrapフォーム でボタンで中央に使う完全なHTMLです：

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