menyelaraskan vertikal dengan Bootstrap 3


889

Saya menggunakan Twitter Bootstrap 3, dan saya memiliki masalah ketika saya ingin menyelaraskan dua secara vertikal div, misalnya - tautan JSFiddle :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Sistem grid di Bootstrap menggunakan float: left, tidak display:inline-block, sehingga properti vertical-aligntidak berfungsi. Saya mencoba menggunakan margin-topuntuk memperbaikinya, tetapi saya pikir ini bukan solusi yang baik untuk desain responsif.


1
tidak tidak, saya ingin menyelaraskan secara vertikal 2 div, tidak ada teks di dalamnya, sesuatu seperti ini jsfiddle.net/corinem/Aj9H9 tetapi dalam contoh ini saya tidak menggunakan bootstrap
corinem


6
PENTING: Kedua kolom membutuhkan kelas "vcenter". Kalau tidak, itu tidak akan berhasil. Menghabiskan waktu satu jam sekarang hanya mencari tahu itu.
Cymro

tidak ada satu jawaban pun yang bekerja dengan sempurna pada chrome IE8 dan mobile untuk saya dengan baris yang berisi 5 col- (dan 3 col- on mobile)
amdev

Di Bootstrap 4, pelurusan tengah vertikal sangat berbeda: stackoverflow.com/a/41464397/171456
Zim

Jawaban:


938

Jawaban ini menyajikan peretasan, tetapi saya sangat menyarankan Anda untuk menggunakan flexbox (sebagaimana dinyatakan dalam jawaban @Haschem ), karena sekarang telah didukung di mana-mana.

Tautan demo:
- Bootstrap 3
- Bootstrap 4 alpha 6

Anda masih dapat menggunakan kelas khusus saat Anda membutuhkannya:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Bootply

Menggunakan inline-blockmenambahkan ruang ekstra di antara blok jika Anda membiarkan ruang nyata dalam kode Anda (seperti ...</div> </div>...). Ruang ekstra ini memecah kisi kami jika ukuran kolom menambahkan hingga 12:

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Di sini, kami memiliki ruang ekstra di antara <div class="[...] col-lg-2">dan <div class="[...] col-lg-10">(carriage return dan 2 tab / 8 spasi). Dan sebagainya...

Masukkan deskripsi gambar di sini

Ayo tendang ruang ekstra ini !!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Masukkan deskripsi gambar di sini

Perhatikan komentar yang tampaknya tidak berguna <!-- ... -->? Mereka penting - tanpa mereka, spasi putih antara <div>elemen akan mengambil ruang dalam tata letak, memecahkan sistem grid.

Catatan: Bootply telah diperbarui


18
Ini pecah jika Anda menentukan kisi kolom yang menambahkan hingga 12 (misalnya menggunakan col-lg-2dan col-lg-10). Menariknya, jika Anda menambahkan kode JS berikut (dengan asumsi jQuery), ia berhasil memperbaiki sendiri:$('.row').html($('.vcenter'));
Jake Z

8
@pasemes Ini disebabkan oleh inline-block ruang ekstra (terkenal) . Saya memberikan solusi dalam hasil edit saya.
zessx

92
Bagian dengan komentar kosong terasa seperti sihir yang dalam, gelap, jahat. Dan itu. Tetapi seseorang di suatu tempat memutuskan itu harus bekerja, begitu juga.
cfstras

5
Terkejut tidak ada yang menyebutkan ini tetapi, alih-alih hal komentar, Anda dapat mengatur "font-size: 0;" pada induk div blok inline untuk menghapus "ruang misteri"
Poff

4
Tidak perlu menggunakan komentar html <! - -> atau kode javascript apa pun untuk memperbaiki masalah ruang ekstra, ada trik CSS sederhana dan efektif: margin negatif. Tambahkan saja margin-right: -4px; ke kelas .vcenter. Diuji dan bekerja dengan semua browser (kecuali untuk IE6 dan IE7 yang lama ... tetapi siapa yang peduli dengan prasejarah;))
Frank

897

Tata letak kotak yang fleksibel

Dengan munculnya Kotak Fleksibel CSS , banyak mimpi buruk desainer web 1 telah teratasi. Salah satu yang paling rumit, penyelarasan vertikal. Sekarang dimungkinkan bahkan di ketinggian yang tidak diketahui .

"Dua dekade retas tata letak akan segera berakhir. Mungkin bukan besok, tapi segera, dan selama sisa hidup kita."

- CSS Legendary Eric Meyer di W3Conf 2013

Kotak Fleksibel (atau singkatnya, Flexbox), adalah sistem tata letak baru yang dirancang khusus untuk keperluan tata letak. The Spesifikasi negara :

Tata letak fleksibel dangkal mirip dengan tata letak blok. Ia tidak memiliki banyak properti teks atau dokumen-sentris yang lebih kompleks yang dapat digunakan dalam tata letak blok, seperti float dan kolom. Sebagai gantinya, ia memperoleh alat sederhana dan kuat untuk mendistribusikan ruang dan menyelaraskan konten dengan cara yang sering dibutuhkan webapps dan laman web kompleks.

Bagaimana ini bisa membantu dalam kasus ini? Baiklah, mari kita lihat.


Kolom selaras vertikal

Menggunakan Twitter Bootstrap kita punya .rowbeberapa .col-*. Yang perlu kita lakukan adalah untuk menampilkan .row2 yang diinginkan sebagai kotak wadah fleksibel dan kemudian sejajarkan semua item fleksibelnya (kolom) secara vertikal berdasarkan align-itemsproperti.

CONTOH DI SINI (Silakan baca komentar dengan hati-hati)

<div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>
.vertical-align {
    display: flex;
    align-items: center;
}

Hasil

Kolom selaras vertikal di Twitter Bootstrap

Area berwarna menampilkan kotak kolom.

Mengklarifikasi align-items: center

8.3 Penyelarasan Sumbu Lintas: align-itemsproperti

Benda fleksibel dapat disejajarkan dalam sumbu silang dari garis saat ini dari wadah fleksibel, serupa dengan justify-contenttetapi pada arah tegak lurus. align-itemsmenyetel perataan standar untuk semua item penampung flex, termasuk item flex anonim .

align-items: center; Menurut nilai tengah, kotak margin item fleksibel dipusatkan pada sumbu silang di dalam garis.


Peringatan Besar

Catatan penting # 1: Bootstrap Twitter tidak menentukanwidth kolom di perangkat ekstra kecil kecuali Anda memberikan salah satu .col-xs-#kelas ke kolom.

Karena itu dalam demo khusus ini, saya telah menggunakan .col-xs-* kelas agar kolom ditampilkan dengan benar dalam mode seluler, karena ini menentukan widthkolom secara eksplisit.

Tapi Anda juga bisa mematikan tata letak Flexbox hanya dengan mengubah display: flex;kedisplay: block; dalam ukuran layar tertentu. Contohnya:

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

Atau Anda bisa menentukan .vertical-align hanya pada ukuran layar tertentu seperti:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

Dalam hal ini, aku akan pergi dengan @KevinNelson 's pendekatan .

Catatan penting # 2: Awalan vendor dihilangkan karena singkatnya. Sintaks Flexbox telah diubah selama ini. Sintaks tertulis baru tidak akan berfungsi pada versi browser web yang lebih lama (tetapi tidak setua Internet Explorer 9! Flexbox didukung pada Internet Explorer 10 dan yang lebih baru).

Ini berarti Anda juga harus menggunakan properti yang diawali dengan vendor seperti display: -webkit-box dan seterusnya dalam mode produksi.

Jika Anda mengklik "Toggle Compiled View" di Demo , Anda akan melihat versi awalan deklarasi CSS (terima kasih kepada Autoprefixer ).


Kolom tinggi penuh dengan konten selaras vertikal

Seperti yang Anda lihat di demo sebelumnya , kolom (item fleksibel) tidak lagi setinggi wadahnya (kotak kontainer fleksibel. Yaitu.row elemen).

Ini karena menggunakan centernilai untuk align-itemsproperti. Nilai defaultnya adalah stretchagar item dapat mengisi seluruh ketinggian elemen induk.

Untuk memperbaikinya, Anda dapat menambahkan display: flex;ke kolom juga:

CONTOH DI SINI (Sekali lagi, pikirkan komentarnya)

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

Hasil

Kolom tinggi penuh dengan konten selaras vertikal di Twitter Bootstrap

Area berwarna menampilkan kotak kolom.

Terakhir, namun tidak kalah pentingnya , perhatikan bahwa demo dan cuplikan kode di sini dimaksudkan untuk memberi Anda ide yang berbeda, untuk memberikan pendekatan modern untuk mencapai tujuan. Harap perhatikan bagian " Peringatan Besar " jika Anda akan menggunakan pendekatan ini di situs web atau aplikasi dunia nyata.


Untuk bacaan lebih lanjut termasuk dukungan browser, sumber daya ini akan berguna:


1. Sejajarkan gambar secara vertikal di dalam div dengan ketinggian responsif. 2. Lebih baik menggunakan kelas tambahan agar tidak mengubah default Bootstrap Twitter .row.


9
Setelah sedikit riset, saya benar-benar menemukan bahwa HTML5Please.com mengatakan bahwa ada cukup dukungan untuk menggunakannya. Jadi itu luar biasa! html5please.com/#flexbox
Alec Moore

6
Ini sebenarnya solusi terbaik dan harus memiliki lebih banyak dukungan. Dan tentu saja kami, pengembang, harus menggunakannya sebanyak mungkin untuk memperbanyaknya.
Mateus Neves

12
Saya mencoba ini dan tidak bekerja untuk saya dengan cara yang diharapkan, sampai saya mengedit biola Anda dan menyadari bahwa ini benar-benar tidak berguna dan membuang-buang waktu. Melakukan hal ini sepenuhnya meleset dari desain responsif, karena kolom tidak akan menumpuk lagi satu di atas yang lain ketika mereka tidak masuk ke layar, sehingga membuat kebutuhan bootstrap sama sekali tidak berguna dan membuat situs Anda tidak responsif. Untuk melihat apa yang saya maksud, ubah col-xs- * ke col-xs-12 pada masing-masing contoh, buat layar browser Anda sangat kecil (seperti perangkat seluler) dan lihat hasilnya: tidak ada lagi responsif.
Pere

8
@HashemQolami walaupun Anda menggunakan kelas yang bernama col-*, biola / codepens Anda tidak menggunakan bootstrap, sehingga mereka menyesatkan. Contoh Anda tidak berfungsi dengan bootstrap; sistem gridnya tidak berdasarkan flex, sehingga tidak kompatibel. Cukup coba apa pun contoh Anda di halaman yang didukung bootstrap dan Anda akan menyadari bahwa itu tidak berfungsi.
Pere

5
@Hashem Qolami masih tidak dapat menemukan use case untuk saran Anda. Salah satu fitur utama Bootstrap, disctintive adalah kolom bertumpuk satu sama lain begitu tidak cocok secara horizontal. Itu tidak terjadi lagi dengan solusi Anda. Sistem kisi berfungsi bahkan jika Anda memuat gaya saja, seperti yang dapat Anda lihat di biola ini . Tidak js; css saja. Ubah ukuran area render dan itu akan merespons. Itu tidak terjadi dalam salah satu contoh Anda. Pendekatan "mobile first" hilang, membuat Bootstrap tidak perlu. Jadi jawaban ini salah, menyesatkan, atau tidak lengkap.
Pere

48

Kode di bawah ini berfungsi untuk saya:

.vertical-align {
    display: flex;
    align-items: center;
}

4
IMHO solusi paling sederhana
saiyancoder

3
Adakah yang punya solusi yang bekerja dengan satu kolom? Saya mendapat baris, dan kemudian di dalam hanya col-md-6. Solusi ini dan yang lainnya dari flexbox hanya berfungsi ketika ada 2 kolom
Ka Mok

36

Perbarui 2020

Saya tahu pertanyaan aslinya adalah untuk Bootstrap 3, tetapi sekarang setelah Bootstrap 4 telah dirilis, berikut adalah beberapa panduan terbaru tentang vertikal center.

Penting! Pusat vertikal relatif terhadap ketinggian induk

Jika induk elemen yang Anda coba pusatkan tidak memiliki ketinggian yang ditentukan , tidak ada solusi pemusatan vertikal yang akan berfungsi!

Bootstrap 4

Sekarang karena Bootstrap 4 adalah flexbox secara default, ada banyak pendekatan berbeda untuk penyelarasan vertikal dengan menggunakan: margin otomatis , utilitas flexbox , atau utilitas tampilan bersama dengan utilitas penyelarasan vertikal . Pada awalnya "utilitas penyelarasan vertikal" tampak jelas, tetapi ini hanya bekerja dengan elemen tampilan inline dan tabel. Berikut adalah beberapa opsi pemusatan vertikal Bootstrap 4 ..


1 - Pusat Vertikal Menggunakan Margin Otomatis:

Cara lain untuk memusatkan secara vertikal adalah menggunakan my-auto. Ini akan memusatkan elemen dalam wadahnya. Misalnya, h-100buat baris menjadi tinggi penuh, dan my-autoakan memusatkan col-sm-12kolom secara vertikal .

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Bootstrap 4 - Pusat vertikal menggunakan Demo margin otomatis

my-auto mewakili margin pada sumbu y vertikal dan setara dengan:

margin-top: auto;
margin-bottom: auto;

2 - Pusat Vertikal dengan Flexbox:

Kolom kisi tengah vertikal

Karena Bootstrap 4 .rowsekarang display:flexAnda cukup menggunakan align-self-centerpada kolom apa saja untuk memusatkan secara vertikal ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

atau, gunakan align-items-centerpada keseluruhan .rowuntuk mensejajarkan semua col-*baris secara vertikal ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Bootstrap 4 - Demo vertikal ketinggian tengah berbeda


3 - Pusat Vertikal Menggunakan Peralatan Display:

Bootstrap 4 memiliki layar util yang dapat digunakan untuk display:table, display:table-cell, display:inline, dll .. ini dapat digunakan dengan utils vertical alignment untuk inline menyelaraskan, inline-blok atau elemen sel tabel.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Bootstrap 4 - Pusat vertikal menggunakan utils display Demo

Lihat juga: Vertical Align Center di Bootstrap 4


Bootstrap 3

Metode flexbox pada wadah item ke tengah:

.display-flex-center {
    display: flex;
    align-items: center;
}

Ubah metode translateY:

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Metode tampilan sebaris:

.display-inline-block {
    display: inline;
}
.display-inline-block > div {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

Demo metode pemusatan Bootstrap 3


1
Berikut ini adalah dokumentasi Bootstrap untuk mx-auto(pemusatan horizontal), sehingga masuk akal bahwa my-automemusatkan secara vertikal (sumbu y).
xinthose


21

Saya pikir saya akan membagikan "solusi" saya kalau-kalau itu membantu siapa pun yang tidak terbiasa dengan pertanyaan @media sendiri.

Berkat jawaban @ HashemQolami, saya membuat beberapa pertanyaan media yang dapat berfungsi seperti mobile-class sehingga saya bisa menumpuk col- * untuk mobile tetapi menampilkannya secara vertikal di tengah untuk layar yang lebih besar, misalnya

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

.

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

Tata letak yang lebih rumit yang membutuhkan jumlah kolom berbeda untuk setiap resolusi layar (mis. 2 baris untuk -xs, 3 untuk -sm, dan 4 untuk -md, dll.) Membutuhkan beberapa penyelesaian lanjutan, tetapi untuk halaman sederhana dengan -xs ditumpuk dan -sm dan lebih besar di baris, ini berfungsi dengan baik.


Dalam kasus saya, saya harus menambahkan clear: both;kelas di dalam kueri media agar bisa berfungsi.
motaa

1
@ota, Maaf atas kebingungan ... Dalam mode BS3, seperti yang Anda lihat dalam contoh HTML saya, saya menggunakannya sebagai .rowpengubah ... jadi seharusnya terlihat seperti class="row row-sm-flex-center". .rowDefinisi BS3 menanganiclear:both;
Kevin Nelson

Seharusnya saya menganalisis kode html Anda lebih menyeluruh. :) Saya menggunakan pengubah .row juga, tetapi dalam kasus saya (wordpress), itu telah diubah dalam tema induk yang akhirnya membuat saya menambahkan clear: both;lagi.
motaa

21

Mengikuti jawaban yang diterima, jika Anda tidak ingin mengkustomisasi markup, untuk pemisahan masalah atau hanya karena Anda menggunakan CMS, solusi berikut berfungsi dengan baik:

.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid #000">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid #F00">Small</div>
   </div>
 </div>

Batasan di sini adalah bahwa Anda tidak dapat mewarisi ukuran font dari elemen induk karena baris menetapkan ukuran font menjadi 0 untuk menghapus spasi putih.



17

Ini solusi saya. Tambahkan saja kelas ini ke konten CSS Anda.

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

Maka HTML Anda akan terlihat seperti ini:

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>


1
Ini memecah kelas responsif, seperti col-md-6
Lucas Bustamante

15

Saya hanya melakukan ini dan melakukan apa yang saya inginkan.

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

Dan sekarang halaman saya terlihat seperti

<div class='container-fluid align-middle'>
    content

 +--------------------------------+
 |                                |
 |  +--------------------------+  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  +--------------------------+  |
 |                                |
 +--------------------------------+

Masalah dengan pendekatan ini adalah tampaknya tidak berfungsi ketika DIV memiliki ketinggian yang ditentukan: jsfiddle.net/4bpxen25/1 Saya akan merekomendasikan: stackoverflow.com/a/28519318/1477388
user1477388

10

Saya benar-benar menemukan kode berikut berfungsi menggunakan Chrome dan bukan peramban lain selain jawaban yang dipilih saat ini:

.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

Tautan Bootply

Anda mungkin perlu mengubah ketinggian (khusus aktif .v-center) dan menghapus / mengubah div div[class*='col-']untuk kebutuhan Anda.


8

Saya mengalami masalah yang sama. Dalam kasus saya, saya tidak tahu ketinggian wadah luar, tetapi ini adalah bagaimana saya memperbaikinya:

Pertama, atur tinggi untuk elemen htmldan Anda bodysehingga 100%. Ini penting! Tanpa ini, elemen htmldan bodyhanya akan mewarisi ketinggian anak-anak mereka.

html, body {
   height: 100%;
}

Kemudian saya memiliki kelas wadah luar dengan:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

Dan terakhir wadah bagian dalam dengan kelas:

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTML sesederhana:

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

Ini yang Anda butuhkan untuk menyelaraskan konten secara vertikal. Lihat itu di biola:

Jsfiddle


8

Tidak perlu meja dan sel tabel. Itu bisa dicapai dengan mudah menggunakan transformasi.

Contoh: http://codepen.io/arvind/pen/QNbwyM

Kode:

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>


7

Jika Anda menggunakan Less versi Bootstrap, dan mengkompilasi ke dalam CSS sendiri, Anda dapat menggunakan beberapa kelas utilitas untuk digunakan dengan kelas Bootstrap.

Saya telah menemukan ini bekerja dengan sangat baik di mana saya ingin menjaga respon dan konfigurasi dari sistem grid Bootstrap (seperti menggunakan -mdatau-sm ), tapi saya ingin semua kolom dalam baris yang diberikan untuk semua memiliki ketinggian vertikal yang sama (sehingga saya dapat kemudian sejajarkan kontennya secara vertikal dan suruh semua kolom di baris memiliki garis tengah yang sama).

CSS / Kurang:

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML:

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>

6

Saya menguraikan sedikit tentang jawaban zessx , untuk membuatnya lebih mudah digunakan ketika mencampur ukuran kolom yang berbeda pada ukuran layar yang berbeda.

Jika Anda menggunakan Sass , Anda dapat menambahkan ini ke file scss Anda:

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

Yang menghasilkan CSS berikut (yang dapat Anda gunakan langsung di stylesheet Anda, jika Anda tidak menggunakan Sass):

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

Sekarang Anda dapat menggunakannya di kolom responsif Anda seperti ini:

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>

Ini sangat bagus!
Pietro Coelho

Terpilih hanya karena sintaks pendek dan penggunaan variabel KURANG.
Eduard Luca

5

Perilaku Flex didukung secara asli sejak Bootstrap 4. Tambahkan d-flex align-items-centerdirow div. Anda tidak perlu lagi memodifikasi konten CSS Anda.

Contoh sederhana: http://jsfiddle.net/vgks6L74/

<!-- language: html -->
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

Dengan contoh Anda: http://jsfiddle.net/7zwtL702/

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

Sumber: Flex · Bootstrap


4

OK, secara tidak sengaja saya telah mencampur beberapa solusi, dan akhirnya berfungsi sekarang untuk tata letak saya di mana saya mencoba membuat tabel 3x3 dengan kolom Bootstrap pada resolusi terkecil.

/* Required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* Additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>


2

    div{
        border: 1px solid;
    }
    span{
        display: flex;
        align-items: center;
    }
    .col-5{
        width: 100px;
        height: 50px;
        float: left;
        background: red;
    }
    .col-7{
        width: 200px;
        height: 24px;

        float: left;
        background: green;
    }
    <span>
        <div class="col-5">
        </div>
        <div class="col-7"></div>
    </span>


1

Coba ini,

.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>


1

Ada beberapa cara untuk melakukannya:

  1. Menggunakan 

    display: table-cell;
    vertical-align: middle;

    dan CSS wadah untuk

    display: table;
  2. Gunakan padding bersama dengan layar media untuk mengubah padding relatif terhadap ukuran layar. Layar Google @ media untuk tahu lebih banyak.

  3. Gunakan bantalan relatif

    Yaitu, tentukan bantalan dalam hal%


0

Dengan Bootstrap 4 (yang saat ini dalam alpha) Anda dapat menggunakan .align-items-centerkelas. Jadi Anda dapat menjaga karakter responsif Bootstrap. Langsung bekerja dengan baik untuk saya. Lihat Dokumentasi Bootstrap 4 .


Ini hanya berfungsi untuk beberapa item ketika elemen yang mengandung ditampilkan: flex.
Zim

0

HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

-4

Saya berlari ke situasi yang sama di mana saya ingin menyelaraskan beberapa elemen div secara vertikal berturut-turut dan menemukan bahwa kelas Bootstrap col-xx-xx menerapkan gaya ke div sebagai float: left.

Saya harus menerapkan style pada elemen div seperti style = "Float: none" dan semua elemen div saya mulai selaras secara vertikal. Berikut ini contoh kerjanya:

<div class="col-lg-4" style="float:none;">

JsFiddle Link

Untuk berjaga-jaga jika seseorang ingin membaca lebih lanjut tentang properti apung:

W3Schools - Float


Ini tidak bekerja untuk saya. Saya menguji di Firefox dan Chrome. Semua panel disusun secara vertikal.
Alf

float: tidak ada yang akan membuat mereka ditumpuk secara vertikal, ini adalah cara kerjanya.
ATHER

1
Maka itu jawaban yang tepat untuk pertanyaan yang berbeda. ;)
Alf
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.