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

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