web-dev-qa-db-de.com

Zentrieren Sie den Inhalt in einer Spalte in Bootstrap 4

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-bootstrapflexboxbootstrap-4
40
Praveen Kumar

Es gibt mehrere horizontale Zentrierungsmethoden in Bootstrap 4 ...

  • text-center für zentrierte display:inline-Elemente
  • offset-* oder mx-auto können für die center-Spalte (col-*) verwendet werden.
  • oder justify-content-center in den row- center-Spalten (col-*)
  • mx-auto zum Zentrieren von display:block Elementen in d-flex

mx-auto (automatische x-Achsen-Ränder) zentriert display:block- oder display:flex-Elemente mit einer definierten Breite (%, vw, px usw.). Flexbox wird standardmäßig für Rastersäulen verwendet, daher gibt es auch verschiedene Flexbox-Zentrierungsmethoden.

Demo der Bootstrap 4-Zentriermethoden

In Ihrem Fall verwenden Sie mx-auto, um col-3 und text-center zu zentrieren, um den Inhalt zu zentrieren.

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

http://www.codeply.com/go/GRUfnxl3Ol

oder mit justify-content-center für Flexbox-Elemente (.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

101
Zim

Füge die Klasse text-center zu deiner Spalte hinzu:

<div class="col text-center">
I am centered
</div>
4
zhekaus
<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-center class anstelle von mx-auto als diese Antwort verwendet.

check unter https://jsfiddle.net/sarfarazk/4fsp4ywh/

2
Sarfaraz Kasmani