Pusatkan konten di dalam kolom di Bootstrap 4

95

Saya butuh bantuan untuk memperbaiki masalah, saya perlu memusatkan konten di dalam kolom di bootstrap4, silakan temukan kode saya di bawah ini

<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
sumber

2

Gunakan bisa digunakan class="text-center".

— Mihai Alexandru-Ionut

Saya mencoba menggunakannya tetapi tidak berfungsi untuk Bootstrap4, teksnya saja semakin terpusat tetapi saya membutuhkan div dengan kelas "nauk-info-koneksi" itu sendiri untuk dipusatkan di dalam div col-3.

— Praveen Kumar

Saya menggunakan metode tradisional untuk memusatkan wadah .nauk-info-koneksi {border-radius: 50%; batas: 1px solid $ nauk-orange; tinggi: 100px; lebar: 100px; margin: 0 otomatis; }

— Praveen Kumar

206

Ada beberapa metode pemusatan horizontal di Bootstrap 4 ...

text-centeruntuk display:inlineelemen tengah
offset-*atau mx-autodapat digunakan untuk kolom tengah ( col-*)
atau, justify-content-centerpada rowke kolom pusat ( col-*)
mx-autountuk memusatkan display:blockelemen di dalamnyad-flex

mx-auto(margin sumbu x otomatis) akan memusatkan display:blockatau display:flexelemen yang memiliki lebar yang ditentukan, (%, vw, px, dll ..). Flexbox digunakan secara default pada kolom grid, jadi ada juga berbagai metode pemusatan flexbox.

Demo Metode Pemusatan Bootstrap 4

Dalam kasus Anda, gunakan mx-autountuk memusatkan col-3dan text-centeruntuk memusatkan isinya ..

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

https://codeply.com/go/GRUfnxl3Ol

atau, menggunakanjustify-content-centerpada elemen flexbox (.row):

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

Lihat juga:
Vertical Align Center di Bootstrap 4

— Zim
sumber

Terima kasih. Apa yang tidak saya lihat di salah satu contoh atau dokumen Bootstrap adalah pemusatan horizontal elemen non-inline, pada breakpoint yang berbeda. Misalnya, memusatkan a <select>di md dan di atasnya, tetapi meratakan kiri di bawah md.

— KayakinKoder

Jika Anda menggunakan Bootstrap 4 selectitu display: block, bukan display: inline karena form-controldisplay: block. Tentu saja pertanyaan awal bukanlah tentang menggunakan breakpoints responsif jadi itu tidak dijelaskan dalam jawaban.

— Zim

12

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

Luaskan cuplikan

Aktifkan 'flex' untuk kolom yang kita inginkan & gunakan justify-content-center

— DhineshYa
sumber

ini adalah satu-satunya solusi yang berhasil untuk saya. Fiuh! terima kasih;)

— Akhil

8

Tambahkan kelas text-centerke kolom Anda:

<div class="col text-center">
I am centered
</div>

— zhekaus
sumber

5

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

Saya telah menggunakan justify-content-centerkelas, bukan mx-autoseperti dalam jawaban ini .

periksa di https://jsfiddle.net/sarfarazk/4fsp4ywh/

— Sarfaraz Kasmani
sumber

2

Ini sudah tercakup dalam jawaban dengan suara terbanyak

— Jean-François Corbett

@ Jean-François Corbett Saya telah menggunakan kelas justify-content-center daripada mx-auto. Ini juga salah satu metode untuk melakukannya. Orang-orang juga dapat menggunakan ini. Saya hanya mencoba membantu orang lain. Terima kasih

— Sarfaraz Kasmani

Ah benar. Sedikit penjelasan bisa sangat bermanfaat.

— 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>

Luaskan cuplikan

— Abdo-Host
sumber

1

2020: Masalah Serupa

Jika konten Anda adalah sekumpulan tombol yang ingin Anda pindahkan ke tengah halaman, gabungkan dalam satu baris dan gunakan justify-content-center.

Contoh kode di bawah ini:

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

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

</div>

— MarcoZen
sumber