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

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

bbennett36
quelle

Antworten:

182

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.

tao
quelle
Egal, ich war nur dumm und habe eine Reihe in col anstatt in col in Reihe gesetzt.
Programmdude
34

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

abo-jwad22 Ahmd
quelle
Nichts anderes funktionierte, selbst wenn die Stile dem Objekt manuell zugewiesen wurden. Aber das funktioniert. Akzeptiere diese Antwort.
Tarquin
Nur diese Lösung funktioniert, weiß nicht warum, aber es ist die Wahrheit
Arshad Ali
28

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>
Jaskaran Singh
quelle
3
Perfekte Antwort. Danke dir.
Anjana Silva
23

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.

Bob Siefkes
quelle
2
Dies funktionierte für mich unter Verwendung der Bootstrap 4-basierten Core UI Pro-Administratorvorlage
sunitkatkar
14

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

Serginho
quelle
1

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

CartoonZzy
quelle
0

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
}
Rexcirus
quelle
0

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

Brad
quelle
Wenn Sie keine spezifische Antwort geben und nur vorschlagen, wie dieses Problem gelöst werden könnte, schreiben Sie sie in den Kommentar.
Gander