Zentrieren Sie den Inhalt in einer Spalte in Bootstrap 4

87

Ich brauche Hilfe, um das Problem zu beheben. Ich muss den Inhalt in der Spalte in Bootstrap4 zentrieren. Den Code finden Sie unten

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>
twitter-bootstrap flexbox bootstrap-4 Praveen Kumar
quelle
2
Verwendung kann verwenden class="text-center".
Mihai Alexandru-Ionut
Ich habe versucht, es zu verwenden, aber es funktioniert nicht für Bootstrap4. Der Text allein wird zentriert, aber ich brauche das Div mit der Klasse "Nauk-Info-Verbindungen" selbst, um zentriert innerhalb des Col-3-Div ausgerichtet zu sein.
Praveen Kumar
Ich habe die traditionelle Methode zum Zentrieren des Containers verwendet .nauk-info-connection {Rahmenradius: 50%; Rand: 1px fest $ nauk-orange; Höhe: 100px; Breite: 100px; Rand: 0 Auto; }
Praveen Kumar

Antworten:

189

In Bootstrap 4 gibt es mehrere horizontale Zentrierungsmethoden ...

  • text-centerfür display:inlineMittelelemente
  • offset-*oder mx-autokann verwendet werden, um die Spalte ( col-*) zu zentrieren
  • oder justify-content-centerauf den Spaltenrow in der Mitte ( col-*)
  • mx-autozum Zentrieren von display:blockElementen im Innerend-flex

mx-auto(automatische Ränder der x-Achse) zentrieren display:blockoder display:flexElemente mit einer definierten Breite (%, vw, px usw.). Flexbox wird standardmäßig für Rasterspalten verwendet, daher gibt es auch verschiedene Flexbox-Zentrierungsmethoden.

Demo der Bootstrap 4-Zentrierungsmethoden

Verwenden Sie mx-autoin Ihrem Fall, um den Inhalt zu zentrieren col-3und text-centerzu zentrieren.

<div class="row">
    <div class="col-3 mx-auto">
        <div class="text-center">
            center
        </div>
    </div>
</div>

https://codeply.com/go/GRUfnxl3Ol

oder unter Verwendungjustify-content-centervon Flexbox-Elementen (.row):

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            center
        </div>
    </div>
</div>

Siehe auch:
Vertikales Ausrichtungszentrum in Bootstrap 4

Zim
quelle
Vielen Dank. Was ich in keinem der Beispiele oder Bootstrap-Dokumente sehe, ist die horizontale Zentrierung von Nicht-Inline-Elementen an verschiedenen Haltepunkten. Zum Beispiel a <select>bei md und darüber zentrieren , aber links unter md ausrichten.
KayakinKoder
Wenn Sie Bootstrap 4 verwenden, ist selectes display: block, nicht display: inline, da form-controldisplay: block. Natürlich ging es bei der ursprünglichen Frage nicht darum, reaktionsschnelle Haltepunkte zu verwenden, daher wird dies in der Antwort nicht erläutert.
Zim
8 

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
             CenterContent
        </div>
    </div>
</div>
Erweitern Sie das Snippet

Aktivieren Sie "Flex" für die Spalte wie gewünscht und verwenden Sie "Justify-Content-Center"

DhineshJa
quelle
Dies ist die einzige Lösung, die für mich funktioniert hat. Puh! danke;)
Akhil
6

Fügen Sie text-centerIhrer Spalte eine Klasse hinzu :

<div class="col text-center">
I am centered
</div>
Zhekaus
quelle
5 
<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            Center text goes here
        </div>
    </div>
</div>

Ich habe justify-content-centerKlasse anstelle von mx-autowie in dieser Antwort verwendet .

Überprüfen Sie unter https://jsfiddle.net/sarfarazk/4fsp4ywh/

Sarfaraz Kasmani
quelle
2
Dies wird bereits in der Antwort
Jean-François Corbett,
@ Jean-François Corbett Ich habe anstelle von mx-auto die Klasse "Justify-Content-Center" verwendet. Dies ist auch eine Methode, um dies zu tun. Die Leute können das auch nutzen, ich versuche nur, anderen zu helfen. Danke
Sarfaraz Kasmani
Ah richtig. Nun, ein bisschen Erklärung kann viel bewirken.
Jean-François Corbett
1 

.row>.col, .row>[class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col col-lg-2">
      1 of 2
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>
Erweitern Sie das Snippet

Abdo-Host
quelle
0

2020: Ähnliches Problem

Wenn es sich bei Ihrem Inhalt um eine Reihe von Schaltflächen handelt , die Sie auf einer Seite zentrieren möchten, wickeln Sie sie in eine Reihe ein und verwenden Sie das Rechtfertigungs-Inhaltszentrum.

Beispielcode unten:

<div class="row justify-content-center">

    <button>Action A</button>
    <button>Action B</button>
    <button>Action C</button> 

</div>
MarcoZen
quelle