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

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