Pertanyaan vertical-align dengan Bootstrap 3


Saya menggunakan Twitter Bootstrap 3, dan saya memiliki masalah ketika saya ingin menyelaraskan secara vertikal dua div, sebagai contoh - 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: lefttidak display:inline-block, jadi properti vertical-align tidak berfungsi. Saya mencoba menggunakan margin-top untuk memperbaikinya, tapi saya pikir ini bukan solusi yang baik untuk desain responsif.


753
2017-12-12 15:43


asal


Jawaban:


Jawaban ini menyajikan peretasan, tetapi saya akan sangat menyarankan Anda untuk menggunakan flexbox (sebagaimana dinyatakan dalam Jawaban @Haschem), karena sekarang 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-block menambahkan spasi ekstra di antara blok jika Anda membiarkan ruang nyata di kode Anda (seperti ...</div> </div>...). Ruang ekstra ini memecah grid kami jika ukuran kolom bertambah 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 punya ruang tambahan di antara <div class="[...] col-lg-2"> dan <div class="[...] col-lg-10"> (carriage return dan 2 tab / 8 spasi). Dan sebagainya...

Enter image description here

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

Enter image description here

Perhatikan tampaknya komentar tidak berguna <!-- ... -->? Mereka penting - tanpa mereka, ruang kosong antara <div> elemen akan mengambil ruang di tata letak, melanggar sistem grid.

Catatan: Bootply telah diperbarui


836
2017-12-12 16:17



Tata letak kotak yang fleksibel

Dengan munculnya Kotak Fleksibel CSS, banyak mimpi buruk desainer web1 telah diselesaikan. Salah satu yang paling menyeramkan, perataan vertikal. Sekarang mungkin bahkan di ketinggian tidak dikenal.

"Dua dekade hacks layout akan segera berakhir. Mungkin tidak besok,   tetapi 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. Itu status spesifikasi:

Tata letak Flex secara dangkal mirip dengan tata letak blok. Itu tidak memiliki banyak   properti teks-atau dokumen-sentris yang lebih kompleks yang dapat digunakan   dalam tata letak blok, seperti pelampung dan kolom. Sebagai imbalannya, hal itu menjadi sederhana   dan alat canggih untuk mendistribusikan ruang dan menyelaraskan konten dengan cara   bahwa webapps dan halaman web yang kompleks sering dibutuhkan.

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


Kolom lurus vertikal

Menggunakan Twitter Bootstrap yang kami miliki .rows memiliki beberapa .col-*s. Yang perlu kita lakukan adalah menampilkan yang diinginkan .row2 sebagai wadah fleksibel kotak dan kemudian sejajarkan semua item fleksibels (kolom) secara vertikal oleh align-items milik.

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

Vertical aligned columns in Twitter Bootstrap

Area berwarna menampilkan padding-kotak kolom.

Klarifikasi align-items: center

8.3 Cross-axis Alignment: yang align-items milik

Item Flex dapat disejajarkan dalam sumbu silang dari baris saat ini wadah fleksibel, mirip dengan justify-contenttetapi dalam arah tegak lurus. align-items menetapkan perataan default untuk semua item kontainer fleksibel, termasuk anonim flex item.

align-items: center;   Dengan nilai tengah, the item fleksibelKotak margin terpusat di sumbu silang dalam garis.


Big Alert

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

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

Tetapi alternatifnya Anda bisa mematikan tata letak Flexbox hanya dengan mengubah display: flex; untuk display: 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 kamu bisa menentukan .vertical-align  hanya pada ukuran layar tertentu seperti ini:

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

Dalam hal ini, saya akan pergi bersama @KevinNelson's pendekatan.

Catatan penting # 2: Vendor awalan dihilangkan karena keringkasan. Sintaks Flexbox telah diubah selama ini. Sintaksis tertulis yang baru tidak akan berfungsi pada versi browser web yang lebih lama (tetapi tidak setua itu sebagai Internet Explorer 9! Flexbox didukung di Internet Explorer 10 dan yang lebih baru).

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

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


Kolom tinggi penuh dengan konten selaras vertikal

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

Ini karena menggunakan center nilai untuk align-items milik. Nilai standarnya adalah stretch sehingga item dapat mengisi seluruh tinggi elemen induk.

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

CONTOH DI SINI  (Sekali lagi, keberatan komentar)

.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

Full-height columns with vertical aligned contents in Twitter Bootstrap

Area berwarna menampilkan padding-kotak kolom.

Terakhir tapi bukan yang akhir, perhatikan bahwa demo dan cuplikan kode di sini dimaksudkan untuk memberi Anda ide yang berbeda, untuk memberikan pendekatan modern untuk mencapai sasaran. Harap diingat "Big Alert"Bagian 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 Menyesuaikan secara vertikal gambar di dalam div dengan tinggi responsif 2. Lebih baik menggunakan kelas tambahan agar tidak mengubah default Twitter Bootstrap .row.


803
2017-08-27 00:09



Kode di bawah berfungsi untuk saya:

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

27
2017-10-01 15:01



Coba ini di CSS dari div:

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

23
2017-12-12 16:20



Mengikuti jawaban yang diterima, jika Anda tidak ingin menyesuaikan markup, untuk memisahkan 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 Anda tidak dapat mewarisi ukuran font dari elemen induk karena baris mengatur ukuran font menjadi 0 untuk menghapus spasi.


20
2018-01-27 09:11



Saya pikir saya akan berbagi "solusi" saya jika itu membantu orang lain yang tidak akrab dengan pertanyaan @media sendiri.

Berkat jawaban @ HashemQolami, saya membangun beberapa kueri media yang akan bekerja seperti kelas kol- * sehingga saya dapat menumpuk col-* untuk seluler tetapi menampilkannya secara vertikal di tengah untuk layar yang lebih besar, mis.

<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 per resolusi layar (misalnya 2 baris untuk -x, 3 untuk -sm, dan 4 untuk -md, dll.) Akan membutuhkan proses yang lebih maju, tetapi untuk halaman sederhana dengan -x ditumpuk dan -sm dan lebih besar dalam baris, ini berfungsi dengan baik.


19
2018-01-05 00:05



Saya lebih suka metode ini sesuai David Walsh Vertical Center CSS:

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

Itu transform tidak penting; itu hanya menemukan pusat sedikit lebih akurat. Internet Explorer 8 mungkin sedikit kurang terpusat sebagai hasilnya, tetapi itu tetap tidak buruk - Bisakah saya menggunakan - Mengubah 2d.


16
2018-02-14 19:21



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

 ----------------------------------
 |                                |
 |   --------------------------   |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |   --------------------------   |
 |                                |
 ----------------------------------

13
2018-05-31 23:13



Perbarui 2018

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

Penting!  Pusat vertikal relatif terhadap tinggi dari orang tua

Jika induk dari elemen Anda mencoba ke pusat tidak ditentukan    tinggi, tidak ada solusi pemusatan vertikal akan bekerja!

Bootstrap 4

Sekarang BS4 flexbox secara default ada banyak pendekatan berbeda untuk penyelarasan vertikal menggunakan: margin otomatis, util flexbox, atau tampilan utils bersama Utiliti jalur vertikal. Pada awalnya "utilisasi sejajar vertikal" tampak jelas tetapi ini hanya bekerja dengan elemen tampilan inline dan tabel. Berikut adalah beberapa opsi pemosisian vertikal Bootstrap 4 ..


1 - Pusat Vertikal Menggunakan Margin Otomatis:

Cara lain ke pusat vertikal adalah dengan menggunakan my-auto. Ini akan memusatkan elemen di dalam wadahnya. Sebagai contoh, h-100 membuat tinggi baris penuh, dan my-auto akan secara vertikal memusatkan col-sm-12 kolom.

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

BS4 - Pusat vertikal menggunakan margin otomatis Demo

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

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

2 - Pusat Vertikal dengan Flexbox:

vertical center grid columns

Sejak Bootstrap 4 .row sekarang display:flex Anda cukup menggunakan align-self-center pada kolom apa pun untuk memusatkannya ...

       <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-center secara keseluruhan .row ke pusat vertikal sejajarkan semua col-* di barisan ...

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

BS4 - Kolom tinggi vertikal yang berbeda-beda Demo


3 - Pusat Vertikal Menggunakan Utiliti Display:

Bootstrap 4 memiliki tampilan utils yang bisa digunakan untuk display:table, display:table-cell, display:inline, dll. Ini dapat digunakan dengan utilisasi penyelarasan vertikal untuk menyelaraskan elemen sel inline-blok atau 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>

BS4 - Pusat vertikal menggunakan utilitas tampilan Demo

Juga lihat: Pusat Align Vertikal di Bootstrap 4


Bootstrap 3

Metode Flexbox pada wadah item (s) ke pusat:

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

Transformasikan metode translateY:

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

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

Tampilkan metode inline:

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

Demo metode pemusatan Bootstrap 3


12
2018-03-21 12:14



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

.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 (khususnya pada .v-center) dan menghapus / mengubah div div[class*='col-'] untuk kebutuhan anda.


9
2017-07-12 19:57