Ich brauche Hilfe, um das Problem zu beheben, ich brauche, um den Inhalt innerhalb der Spalte in bootstrap4 zentrieren, finden Sie bitte meinen Code unten
<div class="container">
<div class="row justify-content-center">
<div class="col-3">
<div class="nauk-info-connections">
</div>
</div>
</div>
Es gibt mehrere horizontale Zentrierungsmethoden in Bootstrap 4...
offset-*
oder mx-auto
kann zum Zentrieren von Spalten (col-*
) verwendet werdenjustify-content-center
auf der row
zum Zentrieren von Spalten (col-*
)mx-auto
(auto x-axis margins) zentriert display:block
oder display:flex
Elemente, die eine definierte Breite haben (%, vw, px, etc..). Flexbox wird standardmäßig für Grid-Spalten verwendet, daher gibt es auch verschiedene Flexbox-Zentrierungsmethoden.
Demo der Bootstrap 4 Zentrierungsmethoden
In Ihrem Fall verwenden Sie mx-auto
, um die col-3
zu zentrieren und text-center
, 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, Verwendung von justify-content-center
auf Flexbox-Elementen (.row
):
<div class="container">
<div class="row justify-content-center">
<div class="col-3 text-center">
center
</div>
</div>
</div>
Siehe auch:
https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4/42252877#
<div class="container">
<div class="row justify-content-center">
<div class="col-3 text-center">
Center text goes here
</div>
</div>
</div>
Ich habe die Klasse justify-content-center
anstelle von mx-auto
wie in dieser Antwort verwendet.
siehe