Pusat Perataan Vertikal di Bootstrap 4

322

Saya mencoba memusatkan Container saya di tengah halaman menggunakan Bootstrap 4. Saya sejauh ini tidak berhasil. Bantuan apa pun akan dihargai.

Saya telah membangunnya di Codepen.io sehingga kalian dapat bermain dengannya dan biarkan saya tahu apa yang berhasil karena saya kehabisan ide ...

Tampilkan cuplikan kode

var currentAuthor = "";
var currentQuote  = "";
function randomQuote() {
  $.ajax({
      url: "https://api.forismatic.com/api/1.0/?",
      dataType: "jsonp",
      data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
      success: function( response ) {
        $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> ' + response.quoteText + ' <i class="fa fa-quote-right" aria-hidden="true"></i></h2>');
        $("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');
        
        currentAuthor = response.quoteAuthor;
        currentQuote  = response.quoteText
      }
  });
}

function openURL(url){
  window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}

function tweetQuote(){
      openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
}

$(document).ready(function () {
    randomQuote();

    $("#get-another-quote-button").click(function(){
        randomQuote();
    });

   $('#tweet').on('click', function() {
       tweetQuote();
   });
});

html, body {
  background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
    background-color: #17234E;
    margin-bottom: 0;
    min-height: 30%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
}


.btn-new-quote {
    color: #0C0C0D;
    background-color: transparent;
    border-color: #414147;
}

.btn-new-quote:hover {
    color: #0C0C0D;
    background-color: #9A989E;
    border-color: #0C0C0D;
}

#tweet {
    color: RGB(100, 100, 100);
}

#tweet:hover {
    color: RGB(50, 50, 50);
}


.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    opacity: .85;
    border-color:  RGB(50, 50, 50);
    padding-bottom: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
    <div class="row justify-content-center align-self-center">
        <div class="col-sm-6">
            <div class="jumbotron vertical-center text-center">
                <h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2>
                <p id="quote-author" class="lead"><em></em></p>
                <hr class="my-2">
                <div class="row align-items-center justify-content-between">
                    <div class="col-sm-1-4 text-left">
                        <a id="tweet" href="#">
                            <h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>
                        </a>
                    </div>
                    <div class="col-sm-1-4 text-right">
                        <button id="get-another-quote-button" type="button" class="btn btn-outline-secondary  btn-new-quote">Don't Quote Me on This...</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

Expand snippet

html css twitter-bootstrap flexbox bootstrap-4 canaan seaton
sumber

675

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!

Sekarang, ke tengah vertikal di Bootstrap 4 ...

Anda dapat menggunakan utilitas flexbox & ukuran baru untuk membuat containerketinggian penuh dan display: flex. Opsi ini tidak memerlukan CSS tambahan (kecuali bahwa ketinggian wadah (mis .: html, tubuh) harus 100% ).

Opsi 1 align-self-centerpada flexbox child

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

https://www.codeply.com/go/fFqaDe5Oey

Opsi 2 align-items-centerpada orang tua flexbox ( .rowadalah display:flex; flex-direction:row)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/BumdFnmLuk

Opsi 3 justify-content-centerpada induk flexbox ( .cardadalahdisplay:flex;flex-direction:column )

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/3gySSEe7nd

Lebih lanjut tentang Bootstrap 4 Vertical Centering

Sekarang Bootstrap 4 menawarkan flexbox dan utilitas lain , ada banyak pendekatan untuk penyelarasan vertikal. http://www.codeply.com/go/WG15ZWC4lf

1 - Pusat Vertikal Menggunakan Margin Otomatis:

Cara lain untuk memusatkan secara vertikal adalah menggunakan my-auto. Ini akan memusatkan elemen di 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>

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:

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>

Demo Vertikal Pusat Ketinggian Berbeda

Lihat Tanya Jawab ini ke tengah, tetapi pertahankan ketinggian yang sama

3 - Pusat Vertikal Menggunakan Utilitas 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>

Pusat Vertikal Menggunakan Demo Display Utils

Lebih banyak contoh
Gambar tengah vertikal di <div>
tengah Vertikal. Masuk. Wadah
Vertikal tengah dan bawah pada <div>
anak Vertikal tengah di dalam induk
Vertikal pusat jumbotron layar penuh

Penting! Apakah saya menyebutkan ketinggian?

Ingat pemusatan vertikal relatif terhadap ketinggian elemen induk . Jika Anda ingin memusatkan pada seluruh halaman, dalam banyak kasus, ini harus CSS Anda ...

body,html {
  height: 100%;
}

Atau gunakan min-height: 100vh( min-vh-100dalam Bootstrap 4.1+) pada induk / wadah. Jika Anda ingin memusatkan elemen anak di dalam induk. Orang tua harus memiliki tinggi yang ditentukan .

Lihat juga:
Penyelarasan vertikal dalam bootstrap 4
Bootstrap 4 Center Vertical dan Horizontal Alignment

Zim
sumber

1

Saat menggunakan di atas pada halaman dengan navbar saya mendapatkan scrollbar. Saya pikir itu menambahkan ketinggian 100% di bawah navbar dan berpusat di atasnya. Bagaimana saya bisa memperbaikinya?

Dimensi baru

Saya mencoba menyelaraskan banyak baris ke tengah dengan kotak fleksibel. Saya ingin menyelaraskan semua tombol di tengah. codeply.com/go/5abdqC33cU

Coder

Saya menyiapkan codepen yang saat ini menunjukkan 3 cara pemusatan berdasarkan cara yang ditunjukkan di sini: codepen.io/yigith/pen/oNjmGEL

KodFun

23

Anda dapat menyelaraskan wadah secara vertikal dengan membuat wadah induk lentur dan menambahkan align-items:center:

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

Pena yang diperbarui

Pete
sumber

1

ohhh lol, saya ketinggalan tautan dalam deskripsi ... Anda juga menambahkan html, body {height:100%}... menambahkannya membuatnya bekerja! Terima kasih!

canaan seaton

1

jawaban Anda tidak menyelesaikan masalah dengan cara yang diminta (menggunakan bootstrap)

AlexNikonov

1

im totaly tidak setuju dengan Anda, Anda mengusulkan untuk solusinya meskipun pertanyaannya adalah bagaimana melakukannya dengan kelas Bootstrap.

AlexNikonov

@AlexNikonov di mana dalam pertanyaan OP tidak mengatakan mereka terbatas hanya menggunakan bootstrap - ini adalah alternatif untuk orang lain yang dapat mendarat di halaman ini yang ingin menyelaraskan hal-hal secara vertikal tanpa menggunakan kelas bootstrap. Ikuti saja - ada banyak jawaban lain di sini untuk Anda gunakan. Saya tidak mengerti mengapa Anda menutup telepon tentang hal ini - ini adalah forum untuk semua ide yang akan membantu - bukan hanya jawaban satu pikiran. Ini adalah pengguna seperti Anda memanjakan situs ini dengan men-downvoting jawaban yang menawarkan solusi untuk masalah tetapi hanya karena Anda tidak menyukainya

Pete

@AlexNikonov juga jika Anda membaca posting asli yang belum diedit (ketika saya menambahkan jawaban saya), Anda juga akan melihat OP berusaha memusatkan diri tanpa menggunakan kelas bootstrap sehingga pada saat menjawab, ini benar

Pete

23

Mengikuti bootstrap 4 kelas membantu saya mengatasi ini

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

Manoj
sumber

1

Itu tidak memusatkan div saya secara vertikal.

subuh

Tolong uraikan kode css Anda. bagikan cuplikannya, saya akan melihat masalah yang Anda hadapi.

Manoj

12

Karena tidak ada di atas yang berfungsi untuk saya, saya menambahkan jawaban lain.

Sasaran: Untuk menyelaraskan div secara vertikal dan horizontal pada halaman menggunakan bootstrap 4 kelas flexbox.

Langkah 1: Atur div terluar Anda ke ketinggian 100vh. Ini mengatur ketinggian hingga 100% dari Tinggi Veiwport. Jika Anda tidak melakukan ini, tidak ada hal lain yang akan berhasil. Pengaturan ke ketinggian100% hanya relatif terhadap induknya, jadi jika induknya tidak setinggi penuh viewport, tidak ada yang akan berhasil. Dalam contoh di bawah ini, saya mengatur Tubuh ke 100vh.

Langkah 2: Atur div wadah menjadi wadah flexbox dengan d-flex kelas.

Langkah 3: Pusatkan div secara horizontal dengan justify-content-center kelas.

Langkah 4: Pusatkan div secara vertikal dengan align-items-center

Langkah 5: Jalankan halaman, lihat div Anda yang terpusat secara vertikal dan horizontal.

Perhatikan bahwa tidak ada kelas khusus yang perlu diatur pada div terpusat itu sendiri (child div)

<body style="background-color:#f2f2f2; height:100vh;">

<div class="h-100 d-flex justify-content-center align-items-center">
    <div style="height:600px; background-color:white; width:600px;">
</div>

</div>

</body>

Greg Gum
sumber

@AjayKumar, Apakah Anda ingin membagikan modifikasi Anda?

Greg Gum

Terima kasih, terutama 100vhtriknya banyak membantu saya. Bootstrap juga menyediakan vh-100kelas untuk ini.

svens

10

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

Nate Beers
sumber

5

Saya sudah mencoba semua jawaban dari sini, tetapi menemukan di sini adalah perbedaan antara h-100 dan vh-100 Inilah solusi saya:

      <div className='container vh-100 d-flex align-items-center col justify-content-center'>
        <div className="">
             ...
        </div>
      </div >

AlexNikonov
sumber

4

Di Bootstrap 4 (beta), gunakan align-middle. Lihat Dokumentasi Bootstrap 4 pada penyelarasan Vertikal :

Ubah perataan elemen dengan utilitas perataan vertikal . Harap perhatikan bahwa penyelarasan vertikal hanya memengaruhi elemen sel sebaris , sebaris , sebaris , dan sel tabel .

Pilih dari .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, dan .align-text-topsesuai kebutuhan.

vallismortis
sumber

4

<div class="col-lg-5 col-sm-5 offset-1 d-flex">
            <div class="offer-txt justify-content-center align-self-center">
                <span class="inner-title">Our Offer</span>
                <h2 class="section-title">Today’s Special </h2>
                <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
            </div>
        </div>

Tariqul_Islam
sumber

foto Anda membuat saya bahwa stackoverflow memulai advs: D

AlexNikonov

4

<div class="row">
  <div class="col-md-6">
     <img src="/assets/images/ebook2.png" alt="" class="img-fluid">
  </div>
  <div class="col-md-6 my-auto">
     <h3>Heading</h3>
     <p>Some text.</p>
   </div>
</div>

Baris ini adalah tempat keajaiban terjadi <div class="col-md-6 my-auto">, my-autokehendak memusatkan isi kolom. Ini berfungsi baik dengan situasi seperti contoh kode di atas di mana Anda mungkin memiliki gambar berukuran variabel dan perlu memiliki teks di kolom di sebelah kanan berbaris dengannya.

rampok
sumber

3

Saya melakukannya dengan Bootstrap 4.3.1:

<div class="d-flex vh-100">
  <div class="d-flex w-100 justify-content-center align-self-center">
    I'm in the middle
  </div>
</div>

webjay
sumber

2

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container">
    <div class="row align-items-center justify-content-center" style="height:100vh;">     
         <div>Center Div Here</div>
    </div>
</div>
</body>
</html>

Anu
sumber

@AjayKumar Menambahkan flex-grow-1kelas ke kartu mencegahnya menyusut.

Fred

1

Perataan vertikal Menggunakan bootstrap 4 kelas ini:

parent: d-table

DAN

child: d-table-cell & align-middle & text-center

misalnya:

<div class="tab-icon-holder d-table bg-light">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

dan jika Anda ingin orangtua menjadi lingkaran:

<div class="tab-icon-holder d-table bg-light rounded-circle">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

dimana dua kelas custom css adalah sebagai berikut:

.tab-icon-holder {
  width: 3.5rem;
  height: 3.5rem;
 }
.rounded-circle {
  border-radius: 50% !important
}

Penggunaan akhir bisa seperti misalnya:

<div class="col-md-5 mx-auto text-center">
    <div class="d-flex justify-content-around">
     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Xl.png" height="30rem">
       </div>
     </div>

     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Lg.png" height="30rem">
       </div>
     </div>

     ...

    </div>
</div>

Jafar Amini
sumber

0

Tempatkan konten Anda dalam wadah flexbox yang 100% tinggi yaitu h-100. Kemudian benarkan konten secara terpusat dengan menggunakan kelas justify-content-center .

<section class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
        <h1 class="display-3">Hello, Malawi!</h1>
    </div>
</section>

Mwiza
sumber

-1

gunakan .my-auto(bootsrap4) kelas css di yor div

Preshan Pradeepa
sumber

-2

Di Bootstrap 4.1.3:

Ini bekerja untuk saya ketika saya mencoba untuk memusatkan lencana bootstrap di container > row > columnsebelah h1judul.

Apa yang berhasil adalah beberapa css sederhana:

.my-valign-center {
  vertical-align: 50%;
}

atau

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>

phyatt
sumber

Pusat Perataan Vertikal di Bootstrap 4

Jawaban: