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

Jawaban:

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