Bootstrap 4, Jak wyśrodkować przycisk?

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

Nie mogę dowiedzieć się, jak wyśrodkować ten przycisk. W BS 3 użyłbym po prostu środkowego bloku, ale nie jest to opcja w BS4. Jakakolwiek rada?

W Bootstrap 4 należy użyć text-centerklasy do wyrównania bloków inline .

UWAGA: text-align:center;zdefiniowana w niestandardowej klasie, którą zastosujesz do elementu nadrzędnego, będzie działać niezależnie od używanej wersji Bootstrap. I to jest dokładnie to, co .text-centerma zastosowanie.

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

Jeśli zawartość do wyśrodkowania jest blokowa lub elastyczna (nie inline-), można użyć flexboksa do wyśrodkowania:

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

... co dotyczy display: flex; justify-content: centerrodzica.

Uwaga: nie używaj .row.justify-content-centerzamiast .d-flex.justify-content-center, ponieważ .rowstosuje ujemne marginesy w niektórych odstępach czasu reakcji, co skutkuje nieoczekiwanymi poziomymi paskami przewijania (chyba że .rowjest to bezpośredni element potomny .container, który stosuje dopełnienie boczne, aby przeciwdziałać ujemnemu marginesowi, w prawidłowych odstępach czasu reakcji). Jeśli .rowz jakiegoś powodu musisz użyć , zastąp jego margines i dopełnienie .m-0.p-0, w którym to przypadku otrzymasz prawie takie same style jak .d-flex.

Ważna uwaga: Drugie rozwiązanie jest problematyczne, gdy wyśrodkowana treść (przycisk) przekracza szerokość elementu nadrzędnego ( .d-flex), zwłaszcza gdy rodzic ma szerokość widoku, w szczególności dlatego, że uniemożliwia przewijanie w poziomie do początku treści (lewy większość).
Dlatego nie używaj go, gdy zawartość do wyśrodkowania może być szersza niż dostępna szerokość elementu nadrzędnego, a cała zawartość powinna być dostępna.

Spróbuj tego z bootstrapem

KOD:

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

POŁĄCZYĆ:

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

Oto pełny kod HTML, którego używam do wyśrodkowania za pomocą przycisku w formularzu Bootsrap po zamknięciu form-group:

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

Używając narzędzi bootstrap 4, można wyśrodkować sam element w poziomie, ustawiając poziome marginesy na „auto”.

Aby ustawić poziome marginesy na automatyczne, możesz użyć mx-auto. mDotyczy marginesu i xbędą odnosić się do osi x (lewa + prawej) i autobędą odnosić się do ustawień. Więc to ustawi lewy i prawy margines na ustawienie „auto”. Przeglądarki obliczą margines równo i wyśrodkują element. To ustawienie będzie działać tylko na elementach blokowych, więc należy dodać display: block, a za pomocą narzędzi ładowania początkowego jest to zrobione d-block.

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

Możesz uznać, że wszystkie przeglądarki w pełni obsługują ustawienia automatycznych marginesów zgodnie z tą odpowiedzią. Obsługa przeglądarki dla margin: auto, więc jest bezpieczna w użyciu.

Klasa bootstrap 4 text-centerjest również bardzo dobrym rozwiązaniem, wymaga jednak nadrzędnego elementu wrapper. Zaletą używania automatycznego marginesu jest to, że można to zrobić bezpośrednio na samym elemencie przycisku.

Użyj text-centerklasy w kontenerze nadrzędnym dla Bootstrap 4

U mnie zadziałało (dostosuj „css / style.css” do swojej ścieżki css):

Główny HTML:

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

Treść 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
}

dla przycisku w zwiniętym pasku nawigacyjnym nic powyżej nie działało, więc w moim pliku css zrobiłem .....

.navbar button {
    margin:auto;
}

i zadziałało !!

możesz także po prostu zawinąć klasą H lub klasą P z atrybutem centrum tekstu