Bootstrap 4, Bir düğmeyi nasıl ortaya hizalarım?

<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>
</div>

Bu düğmeyi nasıl ortalayacağımı çözemiyorum. BS 3'te sadece merkez bloğu kullanırdım ancak bu BS4'te bir seçenek değil. Herhangi bir tavsiye?

Bootstrap 4'te satır içi bloklarıtext-center hizalamak için sınıf kullanılmalıdır .

NOT: text-align:center;ana öğenize uyguladığınız özel bir sınıfta tanımlı, kullandığınız Bootstrap sürümünden bağımsız olarak çalışacaktır. Ve tam olarak .text-centergeçerli olan bu.

<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>

Merkezli eklenecek içeriği ise blok veya esnek (değil inline-), bir ortalamak için flexbox'a kullanabilirsiniz:

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

<div class="d-flex justify-content-center">
  <button class="btn btn-default">Centered button</button>
</div>

... display: flex; justify-content: centerebeveyn için geçerlidir .

Not: kullanmayan .row.justify-content-centeryerine .d-flex.justify-content-centerolarak, .rowbelirli yanıt aralıklarla olumsuz marjları uygular beklenmedik yatay kaydırma içine hangi sonuçları (sürece .rowdoğrudan çocuğu .containerdoğru yanıt aralıklarla üzerinde olumsuz marjını karşı koymak yanal dolgu uygular). Herhangi bir .rownedenle kullanmanız gerekiyorsa , kenar boşluğunu ve dolgusunu geçersiz kılın, .m-0.p-0bu durumda ile hemen hemen aynı stillere sahip olursunuz .d-flex.

Önemli not: İkinci çözüm, ortalanmış içerik (düğme), .d-flexözellikle üst öğe görüntü alanı genişliğine sahip olduğunda, özellikle içeriğin başlangıcına yatay olarak kaydırmayı imkansız kıldığı için (solda) ebeveynin genişliğini () aştığında sorunludur. çoğu).
Bu nedenle, ortalanacak içerik mevcut ebeveyn genişliğinden daha geniş olabileceği ve tüm içeriğin erişilebilir olması gerektiğinde bunu kullanmayın.

Bunu bootstrap ile deneyin

KOD:

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

BAĞLANTI:

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

Form-group'u kapattıktan sonra Bootsrap formunda düğmeyle ortalamak için kullandığım tam HTML şu şekildedir:

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

Bootstrap 4 yardımcı programlarının kullanılmasıyla, yatay kenar boşluklarını "otomatik" olarak ayarlayarak bir öğenin kendisini yatay olarak ortalayabilirsiniz.

Yatay kenar boşluklarını otomatik olarak ayarlamak için kullanabilirsiniz mx-auto. mMarjı belirtir ve x(+ sola) x-ekseni değinecektir ve autoayar ile ilgili olacaktır. Bu, sol kenar boşluğunu ve sağ kenar boşluğunu 'otomatik' ayarına getirecektir. Tarayıcılar marjı eşit olarak hesaplayacak ve öğeyi ortalayacaktır. Ayar sadece blok elemanlarında çalışacağından display: bloğunun eklenmesi gerekir ve bootstrap yardımcı programları ile bu yapılır d-block.

<button type="submit" class="btn btn-primary mx-auto d-block">Submit</button>

Bu cevaba göre tüm tarayıcıların otomatik kenar boşluğu ayarlarını tam olarak desteklediğini düşünebilirsiniz. Kenar boşluğu için tarayıcı desteği: otomatik, böylece kullanımı güvenlidir.

Bootstrap 4 sınıfı text-centerda çok iyi bir çözümdür, ancak bir ebeveyn sarmalayıcı öğesine ihtiyaç duyar. Otomatik kenar boşluğu kullanmanın yararı, doğrudan düğme öğesinin kendisinde yapılabilmesidir.

text-centerBootstrap 4 için üst kapsayıcıdaki sınıfı kullanın

Benim için işe yarayan şey şuydu ("css / style.css" yi css yolunuza uyarlayın):

Baş HTML:

 <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

Gövde HTML:

 <div class="container">
  <div class="row">
    <div class="mycentered-text">
      <button class="btn btn-default"> Login </button>
    </div>
  </div>
</div>

Css:

.mycentered-text {
    text-align:center
}

daraltılmış bir gezinme çubuğundaki bir düğme için yukarıdaki hiçbir şey benim için işe yaramadı, bu yüzden css dosyamda yaptım .....

.navbar button {
    margin:auto;
}

ve işe yaradı !!

ayrıca bir H sınıfı veya bir metin merkezi niteliğine sahip P sınıfıyla da kaydırabilirsiniz