Cara menggunakan menyelaraskan vertikal di bootstrap

Masalah sederhana: Bagaimana saya secara vertikal menyelaraskan col hanya col menggunakan bootstrap? Contoh berikut (saya ingin vertikal sejajar child1a dan child1b):

http://bootply.com/73666

HTML

<div class="col-lg-12">

  <div class="col-lg-6 col-md-6 col-12 child1">
    <div class="col-12 child1a">Child content 1a</div>
    <div class="col-12 child1b">Child content 1b</div>

  </div>

  <div class="col-lg-6 col-md-6 col-12 child2">
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>

  </div>

</div>

UPDATE

Beberapa CSS:

.col-lg-12{
top:40px;
bottom:0px;
border:4px solid green;

}

  .child1a, .child1b{
  border:4px solid black;
  display:inline-block !important;
}

.child1{
  border:4px solid blue;
  height:300px;
  display:table-cell !important;
  vertical-align:middle;
}

.child2{
  border:4px solid red;
}
edsioufi
Pertanyaan edit 12 Agustus 2013 в 5:32
Pemrograman
css3 twitter-bootstrap-3 twitter-bootstrap
12 Agustus 2013 в 4:31
9 tayangan
Mengomentari pertanyaan (1)
Larutan
.parent {
    display: table;
    table-layout: fixed;
}

.child {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

table-layout: tetap mencegah melanggar fungsi col-* kelas.

Chris Moschini
Jawaban edit 28 Juli 2014 в 5:22
Komentar (4)

Mungkin topik lama tapi jika seseorang membutuhkan bantuan lebih lanjut dengan melakukan hal berikut misalnya (ini menempatkan teks pada garis tengah dari gambar jika memiliki ketinggian yang lebih besar maka teks).

HTML:

<div class="row display-table">
    <div class="col-xs-12 col-sm-4 display-cell">
        img
    </div>
    <div class="col-xs-12 col-sm-8 display-cell">
        text
    </div>
</div>

CSS:

.display-table{
    display: table;
    table-layout: fixed;
}

.display-cell{
    display: table-cell;
    vertical-align: middle;
    float: none;
}

Hal penting yang saya lewatkan adalah "float: none;" sejak itu punya float kiri dari bootstrap col atribut.

Cheers!

prinsen
Jawaban edit 10 Mei 2017 в 1:24
Komentar (2)

Untuk orang tua: display: tabel;

Untuk anak: display: table-cell;

Kemudian tambahkan vertical-align: middle;

Aku bisa membuat biola tapi rumah waktu sekarang, yay!

OK di sini adalah indah biola: http://jsfiddle.net/lharby/AJAhR/

.parent {
   display:table;
}

.child {
   display:table-cell;
   vertical-align:middle;
   text-align:center;
}
moritzg
Jawaban edit 9 Mei 2017 в 12:11
Komentar (1)

Saya harus menambahkan width: 100%; untuk menampilkan tabel untuk memperbaiki beberapa bahavior aneh di IE dan FF, ketika saya menggunakan contoh ini. IE dan FF punya beberapa masalah menampilkan col-md-* kategori di kanan lebar

.display-table {
        display: table;
        table-layout: fixed;
        width: 100%;
}

.display-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
}
southz rgw
Jawaban edit 29 Februari 2016 в 4:08
Komentar (2)

http://jsfiddle.net/b9chris/zN39r/

HTML:

<div class="item row">
    <div class="col-xs-12 col-sm-6"><h4>This is some text.</h4></div>
    <div class="col-xs-12 col-sm-6"><h4>This is some more.</h4></div>
</div>

CSS:

div.item div h4 {
    height: 60px;
    vertical-align: middle;    
    display: table-cell;
}

Catatan penting:

  • Vertical-align: middle; display: table-cell; harus diterapkan untuk tag yang tidak memiliki kelas Bootstrap diterapkan; itu tidak menjadi col-*, a row, dll.
  • Hal ini dapat't dapat dilakukan tanpa tambahan ini, mungkin sia-sia tag dalam HTML anda, sayangnya.
  • Latar belakang yang tidak perlu - mereka're hanya ada untuk tujuan demo. Jadi, anda don't perlu menerapkan aturan khusus untuk baris atau col-* kategori.
  • Hal ini penting untuk melihat dalam tag tidak meregang untuk 100% dari lebar induknya; dalam skenario ini didn't peduli tapi itu mungkin untuk anda. Jika tidak, anda akan berakhir dengan sesuatu yang lebih dekat dengan beberapa jawaban berikut:

http://jsfiddle.net/b9chris/zN39r/1/

CSS:

div.item div {
    background: #fdd;
    table-layout: fixed;
    display: table;
}
div.item div h4 {
    height: 60px;
    vertical-align: middle;    
    display: table-cell;
    background: #eee;
}

Perhatikan menambahkan table-layout dan display properties pada col-* kategori. Ini harus diterapkan untuk tag(s) yang memiliki col-* diterapkan; tidak't membantu pada tag-tag lainnya.

Komentar (0)

Prinsen's jawaban adalah pilihan terbaik. Tapi, untuk memperbaiki masalah di mana kolom don't runtuhnya kode nya harus dikelilingi oleh media check pernyataan. Cara ini adalah gaya-gaya ini hanya diterapkan ketika kolom yang lebih besar yang aktif. Berikut ini adalah diperbarui jawaban yang lengkap.

HTML:

<div class="row display-table">
    <div class="col-xs-12 col-sm-4 display-cell">
        img
    </div>
    <div class="col-xs-12 col-sm-8 display-cell">
        text
    </div>
</div>

CSS:

@media (min-width: 768px){
   .display-table{
       display: table;
       table-layout: fixed;
   }

   .display-cell{
       display: table-cell;
       vertical-align: middle;
       float: none;
   }
}
Komentar (0)

Anda berarti anda inginkan 1b dan 1b akan berdampingan? 

 <div class="col-lg-6 col-md-6 col-12 child1">
      <div class="col-6 child1a">Child content 1a</div>
      <div class="col-6 child1b">Child content 1b</div>
 </div>
daniel__
Jawaban edit 12 Agustus 2013 в 5:02
Komentar (3)

Dengan Bootstrap 4, anda bisa melakukannya dengan jauh lebih mudah: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment

Komentar (0)