Twitter Bootstrap - cara memusatkan elemen secara horizontal atau vertikal

285

apakah ada cara untuk memusatkan elemen html secara vertikal atau horizontal di dalam induk utama?

css twitter-bootstrap ini aku
sumber
2
Ini adalah pos yang bagus tentang pemusatan horizontal dan vertikal: Lihat Di Sini
markvandencorput
2
Saya juga menghadapi masalah untuk penyelarasan horizontal; Saya hanya menggunakan <center></center>tag
Utpal - Ur Best Pal
4
@ Utpal-UrBestPal <center>tag telah ditinggalkan sekitar 12 tahun yang lalu.
Niels Keurentjes

Jawaban:

246

Pembaruan : walaupun jawaban ini kemungkinan benar kembali pada awal 2013, seharusnya tidak digunakan lagi. Solusi yang tepat menggunakan offset .

Adapun saran pengguna lain ada juga kelas bootstrap asli yang tersedia seperti:

class="text-center"
class="pagination-centered"

terima kasih kepada @Henning dan @trejder

ini aku
sumber
22
Gaya yang persis sama sudah terkandung dalam Bootstrap; cukup gunakanclass="text-center"
Henning
3
Atau .pagination-centeredsebagai alternatif.
trejder
7
Ini seharusnya jawabannya, yang lain mengabaikan seluruh bagian 'in bootstrap' dari pertanyaan.
Ryan McDonough
1
@RyanMcDonough ya efektif ini meracau semua yang disarankan orang lain jadi saya memeriksa jawabannya ok?
itsme
1
Menggunakan text-centeruntuk tata letak adalah praktik yang sangat buruk. Cara yang tepat untuk menyelaraskan kolom di Bootstrap adalah dengan menggunakan col-XX-offset-Ykelas. getbootstrap.com/css/#grid-offsetting . Jawaban ini mungkin benar pada tahun 2013 tetapi tidak boleh digunakan lagi hari ini.
Niels Keurentjes
76

Dari dokumentasi Bootstrap :

Setel elemen ke display: blockdan pusatkan melalui margin. Tersedia sebagai mixin dan kelas.

<div class="center-block">...</div>
m0000g
sumber
55

Untuk pengunjung yang akan datang ke pertanyaan ini:

Jika Anda mencoba memusatkan gambar di div tetapi gambar tidak akan memusatkan, ini bisa menggambarkan masalah Anda:

jsFiddle DEMO masalah

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

The img-responsivekelas menambahkan display:blockinstruksi untuk tag gambar, yang berhenti text-align:center( text-centerkelas) dari bekerja.

LARUTAN:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

jsFiddle of the solution

Menambahkan center-blockkelas menimpa display:blockinstruksi yang dimasukkan dengan menggunakan img-responsivekelas.

Tanpa img-responsivekelas, gambar akan terpusat hanya dengan menambahkan text-centerkelas

Memperbarui:

Anda juga harus mengetahui dasar-dasar flexbox dan bagaimana menggunakannya, karena Bootstrap4 sekarang menggunakannya secara asli .

Berikut ini adalah video tutorial yang sangat baik dan cepat oleh Brad Schiff

Ini lembar contekan yang bagus

cssyphus
sumber
32

Diperbarui 2018

Di Bootstrap 4 , metode pemusatan telah berubah ..

Pusat Horisontal di BS4

  • text-centermasih digunakan untuk display:inlineelemen
  • mx-automenggantikan anak-anak center-blockpusatdisplay:flex
  • offset-* atau mx-auto dapat digunakan untuk memusatkan kolom kotak

mx-auto(margin auto x-axis) akan berpusat display:blockatau display:flexelemen yang memiliki lebar didefinisikan , ( %, vw, px, dll ..). Flexbox digunakan secara default pada kolom kisi, jadi ada juga berbagai metode pemusatan flexbox.

Demo Bootstrap 4 Pemusatan Horizontal

Untuk pemusatan vertikal di BS4 lihat https://stackoverflow.com/a/41464397/171456

Zim
sumber
30

Anda dapat langsung menulis ke file css Anda seperti ini: 

.content {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  }
<div class = "content" >
  
   <p> some text </p>
  </div>
Luaskan cuplikan

kirgiz_jigit
sumber
9

saya menggunakan ini 

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>
atabak
sumber
1
Tidak berfungsi dalam kasus-kasus tertentu (lihat komentar pada dasarnya jawaban yang sama dan tidak menggunakan kelas khusus Bootstrap untuk pemusatan .
Dan Dascalescu
7

untuk pemusatan horizontal Anda dapat memiliki sesuatu seperti ini:

.centering{
float:none;
margin:0 auto
}

 <div class="span8 centering"></div>
PersiaMan
sumber
4
Tidak bekerja (setidaknya tidak dalam pelaksanaan saat ini), ketika langsung digunakan dalam gambar: <img src="img/logo.png" style="float:none; margin:0 auto" />. Sekeliling imgdengan orang tua divdan memberi .text-centeratau .pagination-centeredkelas untuk orang tua bekerja seperti pesona.
trejder
2
untuk memusatkan elemen dengan margin: 0 otomatis, Anda perlu menambahkan lebar ke elemen itu. Dalam contoh di atas tidak ada lebar yang ditentukan karena span8 memiliki lebar di boobstrap tetapi gambar Anda tidak begitu <img src = "img / logo.png" style = "float: none; margin: 0 auto; width: 300px" /> akan memusatkan secara horizontal gambar itu di dalam induk
Raul
2
Ini mengabaikan bagian "Bootstrap" dari pertanyaan.
Dan Dascalescu
5

Saya suka solusi ini dari pertanyaan serupa. https://stackoverflow.com/a/25036303/2364401 Gunakan text-centerkelas bootstraps pada data tabel aktual <td>dan <th>elemen header tabel . Begitu

<td class="text-center">Cell data</td>

dan

<th class="text-center">Header cell data</th>

xander-miller
sumber
5

Dengan bootstrap 4 Anda dapat menggunakan flex

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

sumber: bootstrap 4.1

alvseek
sumber
3

bootstrap 4 + Flex atasi ini

kamu bisa memakai 

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>
Luaskan cuplikan

harus pusat centent horizontaly dan verticaly

taoufiqaitali
sumber
0

Saya menemukan di Bootstrap 4 Anda dapat melakukan ini:

center horizontal memang text-centerkelas

tengah vertikal namun menggunakan kelas bootstrap menambahkan keduanya mb-auto mt-autosehingga margin-top dan margin bawah diatur ke otomatis.

Thomas secara online
sumber
0

untuk pusat vertikal bootstrap4 beberapa item

d-flex untuk aturan fleksibel

kolom fleksibel untuk arah vertikal pada item

justify-content-center untuk pemusatan

style = 'height: 300px;' harus memiliki titik setel di mana center dikalk atau menggunakan kelas h-100

<div class="d-flex flex-column justify-content-center bg-secondary" style="
    height: 300px;
">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
  </div>
Ramil Gilfanov
sumber