Bootstrap 4, Wie kann ich eine Schaltfläche zentrieren?

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

Ich kann nicht herausfinden, wie diese Schaltfläche zentriert werden soll. In BS 3 würde ich nur Center-Block verwenden, aber das ist in BS4 keine Option. Irgendein Rat?

In Bootstrap 4 sollte man die text-centerKlasse verwenden, um Inline-Blöcke auszurichten .

HINWEIS: Die text-align:center;Definition in einer benutzerdefinierten Klasse, die Sie auf Ihr übergeordnetes Element anwenden, funktioniert unabhängig von der verwendeten Bootstrap-Version. Und genau das .text-centergilt.

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

Wenn der zu zentrierende Inhalt Block oder Flex ist (nicht inline-), kann man ihn mit Flexbox zentrieren :

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

... was für display: flex; justify-content: centerEltern gilt.

Hinweis: Verwenden Sie nicht .row.justify-content-centeranstelle von .d-flex.justify-content-center, da .rowbei bestimmten Reaktionsintervallen negative Ränder angewendet werden, was zu unerwarteten horizontalen Bildlaufleisten führt (es .rowsei denn, es handelt sich um ein direktes untergeordnetes Element von .container, das bei den richtigen Reaktionsintervallen einen seitlichen Abstand anwendet, um dem negativen Rand entgegenzuwirken). Wenn Sie .rowaus irgendeinem Grund den Rand und die Polsterung überschreiben müssen .m-0.p-0, erhalten Sie in diesem Fall fast die gleichen Stile wie .d-flex.

Wichtiger Hinweis: Die zweite Lösung ist problematisch, wenn der zentrierte Inhalt (die Schaltfläche) die Breite des übergeordneten Inhalts () überschreitet, .d-flexinsbesondere wenn das übergeordnete Element die Breite des Ansichtsfensters hat, insbesondere weil es unmöglich ist, horizontal zum Anfang des Inhalts zu scrollen (links-) die meisten).
Verwenden Sie es also nicht, wenn der zu zentrierende Inhalt breiter als die verfügbare übergeordnete Breite werden kann und auf alle Inhalte zugegriffen werden sollte.

Versuchen Sie dies mit Bootstrap

CODE:

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

VERKNÜPFUNG:

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

Hier ist der vollständige HTML-Code, den ich zum Zentrieren nach Schaltflächen im Bootsrap-Formular nach dem Schließen der Formulargruppe verwende:

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

Mit den Bootstrap 4-Dienstprogrammen können Sie ein Element selbst horizontal zentrieren, indem Sie die horizontalen Ränder auf "Auto" setzen.

Um die horizontalen Ränder auf Auto zu setzen, können Sie verwenden mx-auto. Das mbezieht sich auf den Rand und das xbezieht sich auf die x-Achse (links + rechts) und autobezieht sich auf die Einstellung. Dadurch werden der linke und der rechte Rand auf die Einstellung "Auto" gesetzt. Browser berechnen den Rand gleichmäßig und zentrieren das Element. Die Einstellung funktioniert nur für Blockelemente, daher muss der display: block hinzugefügt werden, und mit den Bootstrap-Dienstprogrammen wird dies von durchgeführt d-block.

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

Sie können davon ausgehen, dass alle Browser die Einstellungen für den automatischen Rand gemäß dieser Antwort vollständig unterstützen. Browserunterstützung für den Rand: automatisch , damit die Verwendung sicher ist.

Die Bootstrap 4-Klasse text-centerist ebenfalls eine sehr gute Lösung, benötigt jedoch ein übergeordnetes Wrapper-Element. Der Vorteil der Verwendung des automatischen Randes besteht darin, dass dies direkt auf dem Schaltflächenelement selbst erfolgen kann.

Verwenden Sie die text-centerKlasse im übergeordneten Container für Bootstrap 4

Für eine Schaltfläche in einer reduzierten Navigationsleiste hat nichts oben für mich funktioniert, also habe ich in meiner CSS-Datei .....

.navbar button {
    margin:auto;
}

und es hat funktioniert!!

Was für mich funktioniert hat war (passen Sie "css / style.css" an Ihren CSS-Pfad an):

Kopf HTML:

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

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

Sie können auch einfach mit einer H-Klasse oder einer P-Klasse mit einem Textcenter-Attribut umbrechen