Wyśrodkuj zawartość w kolumnie w Bootstrap 4

98

Potrzebuję pomocy w rozwiązaniu problemu, muszę wyśrodkować zawartość w kolumnie w programie bootstrap4, proszę znaleźć mój kod poniżej

<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
źródło
3
Użyj może użyć class="text-center".
Mihai Alexandru-Ionut
Próbowałem go użyć, ale nie działa dla Bootstrap4, sam tekst jest wyśrodkowany, ale potrzebuję, aby sam element div z klasą „nauk-info-connections” był wyśrodkowany i wyrównany do elementu div col-3.
Praveen Kumar
Użyłem tradycyjnej metody centrowania kontenera .nauk-info-connections {border-radius: 50%; granica: 1px solid $ nauk-orange; wysokość: 100px; szerokość: 100px; margines: 0 auto; }
Praveen Kumar

Odpowiedzi:

213

W Bootstrap 4 istnieje wiele metod centrowania w poziomie ...

  • text-centerdo display:inlineelementów środkowych
  • offset-*lub mx-automoże służyć do wyśrodkowania kolumny ( col-*)
  • lub, justify-content-centerna rowdo kolumn center ( col-*)
  • mx-autodo centrowania display:blockelementów wewnątrzd-flex

mx-auto(automatyczne marginesy na osi x) zostaną wyśrodkowane display:blocklub display:flexelementy, które mają zdefiniowaną szerokość (%, vw, px itp.). Flexbox jest używany domyślnie w kolumnach siatki, więc istnieją również różne metody centrowania Flexbox.

Demo metod centrowania Bootstrap 4

W twoim przypadku użyj, mx-autoaby wyśrodkować col-3i text-centerwyśrodkować zawartość.

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

https://codeply.com/go/GRUfnxl3Ol

lub używającjustify-content-centerna elementach flexbox (.row):

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

Zobacz także:
Vertical Align Center w Bootstrap 4

Zim
źródło
Dzięki. To, czego nie widzę w żadnym z przykładów ani w dokumentach Bootstrap, to poziome wyśrodkowanie elementów nieliniowych w różnych punktach przerwania. Na przykład wyśrodkowanie a <select>na md i powyżej, ale wyrównanie do lewej poniżej md.
KayakinKoder
Jeśli używasz Bootstrap 4, selectjest to display: block, a nie display: inline, ponieważ form-controljest display: block. Oczywiście pierwotne pytanie nie dotyczyło używania responsywnych punktów przerwania, więc nie zostało to wyjaśnione w odpowiedzi.
Zim
13 

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
             CenterContent
        </div>
    </div>
</div>
Rozwiń fragment

Włącz „flex” dla kolumny tak, jak chcemy i użyj justify-content-center

Dhinesh Tak
źródło
to jedyne rozwiązanie, które u mnie zadziałało. uff! dziękuję;)
Akhil
8

Dodaj klasę text-centerdo swojej kolumny:

<div class="col text-center">
I am centered
</div>
zhekaus
źródło
5 
<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            Center text goes here
        </div>
    </div>
</div>

Użyłem justify-content-centerklasy zamiast mx-autojak w tej odpowiedzi .

sprawdź na https://jsfiddle.net/sarfarazk/4fsp4ywh/

Sarfaraz Kasmani
źródło
2
Jest to już uwzględnione w najczęściej głosowanej odpowiedzi
Jean-François Corbett
@ Jean-François Corbett Użyłem klasy justify-content-center zamiast mx-auto. Jest to również jedna z metod. Ludzie mogą to wykorzystać, ja też staram się pomagać innym. Dzięki
Sarfaraz Kasmani
Ah, tak. Cóż, trochę wyjaśnienia może wiele zdziałać.
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>
Rozwiń fragment

Abdo-Host
źródło
1

2020: Podobny problem

Jeśli zawartość to zestaw przycisków , które chcesz wyśrodkować na stronie, zawiń je w rzędzie i użyj justify-content-center.

Przykładowy kod poniżej:

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

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

</div>
MarcoZen
źródło