Bootstrap 4'te Dikey Hizalama Merkezi

322

Kapsayıcımı Bootstrap 4 kullanarak sayfanın ortasına ortalamaya çalışıyorum. Şimdiye kadar başarısız oldum. Herhangi bir yardım mutluluk duyacağız.

Ben de bunu yerleşik Codepen.io siz onunla oynamak ve bana fikirlerin dışarı üzereyim olarak işe yaradığını bilgi verebilmemiz için ...

Kod snippet'ini göster

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

— Kanada seatonu
kaynak

675

Önemli! Dikey merkez ebeveynin yüksekliğine göredir

Merkezde çalıştığınız öğesinin üst hayır tanımlamış ise yüksekliğini , hiçbiri dikey merkezleme çözümleri çalışacak!

Şimdi Bootstrap 4'te dikey merkezlemeye ...

Tam yüksekliği ve yapmak için yeni flexbox & size yardımcı programlarını kullanabilirsiniz . Bu seçenekler fazladan CSS gerektirmez ( kap yüksekliğinin (ör: html, gövde)% 100 olması gerekir ).containerdisplay: flex

align-self-centerFlexbox alt öğesinde Seçenek 1

<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

align-items-centerFlexbox üst öğesinde Seçenek 2 ( .rowis 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

justify-content-centerFlexbox üst öğesinde Seçenek 3 ( .cardis display: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

Bootstrap 4 Dikey Merkezleme hakkında daha fazla bilgi

Bootstrap 4 şimdi flexbox ve diğer yardımcı programlar sunduğundan , dikey hizalamaya birçok yaklaşım var. http://www.codeply.com/go/WG15ZWC4lf

1 - Otomatik Kenar Boşluklarını Kullanarak Dikey Merkez:

Dikey olarak merkezlemenin başka bir yolu da kullanmaktır my-auto. Bu, öğeyi kabının içinde ortalar. Örneğin h-100, satırı tam yüksekliğe getirir my-autove col-sm-12sütunu dikey olarak ortalar.

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

Otomatik Kenar Boşlukları Demosunu Kullanarak Dikey Merkez

my-auto dikey y eksenindeki kenar boşluklarını temsil eder ve şunlara eşdeğerdir:

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

2 - Flexbox'lı Dikey Merkez:

Bootstrap 4 yana .rowartık display:flexsadece kullanabilirsiniz align-self-centerdikey ortalamak için herhangi bir sütun üzerinde ...

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

veya satırın align-items-centertamamını .rowdikey olarak ortalamak için tamamını kullanın col-*...

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

Dikey Merkez Farklı Yükseklik Sütunları Demosu

Ortalamak için bu Q / A'ya bakın, ancak eşit yüksekliği koruyun

3 - Display Utils Kullanarak Dikey Merkez:

Özyükleme 4 olan görüntü utils'i için kullanılabilir display:table, display:table-cell, display:inline, vs .. Bu kullanılabilen dikey hizalama utils hizalama satır içi, sıralı blok veya tablo hücre elemanları.

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

Display Utils Demosunu Kullanarak Dikey Merkez

Daha fazla örnek
Dikey ortada dikey orta görüntü. <div>
Kare iç. Konteyner Üst ortada dikey orta
altta dikey orta ve alt <div>Dikey orta tam ekran jumbotron

Önemli! Boydan bahsettim mi?

Dikey merkezlemenin ana öğenin yüksekliğine göreli olduğunu unutmayın . Tüm sayfayı ortalamak istiyorsanız, çoğu durumda bu CSS'niz olmalıdır ...

body,html {
  height: 100%;
}

Veya üst / kapsayıcıda min-height: 100vh( min-vh-100Bootstrap 4.1+ sürümünde) kullanın . Bir alt öğeyi ebeveynin içinde ortalamak istiyorsanız. Ebeveynin tanımlanmış bir yüksekliği olmalıdır .

Ayrıca bakınız: Bootstrap 4'te
dikey hizalama
Bootstrap 4 Orta Dikey ve Yatay Hizalama

— Zim
kaynak

1

Yukarıdan gezinme çubuğu olan bir sayfada kullanırken kaydırma çubuğu alıyorum. Navbarın altına% 100 yükseklik ekliyor ve ortada ortalıyor. Bunu nasıl düzeltebilirim?

— boyut

Birden çok satırı esnek kutu ile merkeze hizalamaya çalışıyorum. Tüm düğmeleri ortada hizalamak istiyorum. codeply.com/go/5abdqC33cU

— Coder

Şu anda burada gösterilen yollara dayalı 3 merkezleme yolu gösteren bir kodlama hazırladım: codepen.io/yigith/pen/oNjmGEL

— KodFun

23

ana kabı esneterek ve ekleyerek kabınızı dikey olarak hizalayabilirsiniz align-items:center:

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

Güncellenmiş Kalem

— Pete
kaynak

1

ohhh lol, açıklamadaki bağlantıyı kaçırdım ... siz de eklediniz html, body {height:100%}... işe yaradı! Teşekkürler!

— canaan seaton

1

cevabınız soruyu sorulan şekilde

— çözmüyor

1

Tamamen sizinle aynı fikirde değilim, Bootstrap sınıflarıyla nasıl yapıldığına dair soruya rağmen geçici bir çözüm öneriyorsunuz.

— AlexNikonov

@AlexNikonov hayır OP soru sadece nerede bootstrap kullanmakla sınırlı olduğunu söylemez - bu, bootstrap sınıfları kullanmadan işleri dikey olarak hizalamak isteyen bu sayfaya gelebilecek diğer insanlar için bir alternatiftir. Sadece ilerleyin - burada kullanabileceğiniz başka birçok cevap var. Bunun için neden takıldığını görmüyorum - bu sadece tek fikirli cevaplar için değil, yardımcı olacak tüm fikirler için bir forum. Bu, sizin gibi kullanıcılar, soruna bir çözüm sunan cevapları indirerek ancak beğenmediğiniz için bu siteyi bozuyor

— Pete

@AlexNikonov ayrıca orijinal düzenlenmemiş gönderiyi okuduysanız (cevabımı eklediğimde), OP'nin bootstrap sınıflarını kullanmadan ortalamaya çalıştığını da göreceksiniz, bu yüzden cevaplama sırasında bu doğruydu

— Pete

23

Bootstrap'ı takip eden 4 sınıf bunu çözmeme yardımcı oldu

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

— Manoj
kaynak

1

Bu benim div dikey olarak merkezli değildi.

— şafak

Lütfen css kodunuzu ayrıntılı olarak açıklar mısınız? bir parçacığını paylaş, karşılaştığın meseleye bakarım.

— Manoj

12

Yukarıdakilerin hiçbiri benim için çalışmadığı için başka bir cevap ekliyorum.

Amaç: Bootstrap 4 flexbox sınıflarını kullanarak bir sayfadaki div değerini dikey ve yatay olarak hizalamak.

Adım 1: En dıştaki div'inizi bir yüksekliğe ayarlayın 100vh. Bu, yüksekliği Veiwport Yüksekliğinin% 100'üne ayarlar. Bunu yapmazsanız, başka hiçbir şey işe yaramaz. Yüksekliğine ayarlamak 100%yalnızca üst öğeye göredir, bu nedenle üst görünüm görünüm alanının tam yüksekliği değilse hiçbir şey çalışmaz. Aşağıdaki örnekte, Gövde'yi 100vh olarak ayarladım.

Adım 2: Konteyner div'i sınıfla birlikte flexbox konteyner olarak ayarlayın d-flex.

Adım 3: Div'i justify-content-centersınıfla yatay olarak ortalayın.

Adım 4: Div'i dikey olarak ortalayın align-items-center

Adım 5: Sayfayı çalıştırın, dikey ve yatay merkezli div'inizi görüntüleyin.

Ortalanmış div'ın (alt div) üzerinde ayarlanması gereken özel bir sınıf olmadığını unutmayın.

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

@AjayKumar, Değişikliklerinizi paylaşmak ister misiniz?

— Greg Gum

Teşekkürler, özellikle 100vhhile bana çok yardımcı oldu. Bootstrap bunun için de vh-100sınıf sağlar .

— svens

10

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

— Nate Biralar
kaynak

5

Buradaki tüm cevapları denedim, ancak burada öğrendim, h-100 ve vh-100 arasındaki fark İşte benim çözümüm:

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

— AlexNikonov
kaynak

4

Bootstrap 4'te (beta) kullanın align-middle. Bkz. Bootstrap 4 Dikey hizalama belgeleri :

Elemanların hizalamasını dikey hizalama yardımcı programlarıyla değiştirin. Dikey hizalamanın yalnızca satır içi , satır içi blok , satır içi tablo ve tablo hücre öğelerini etkilediğini lütfen unutmayın .

Seçim .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, ve .align-text-topgerektiği gibi.

— vallismortis
kaynak

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
kaynak

resimleriniz bana stackoverflow advs başladı thik yaptı: 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>

Bu çizgi Sihirin olduğu <div class="col-md-6 my-auto">, my-autosütunun içeriğini ortalar. Bu, değişken boyutlu bir görüntüye sahip olabileceğiniz ve sütundaki metnin sağdaki çizgiyle hizalanması gereken yukarıdaki kod örneği gibi durumlarda harika çalışır.

— soymak
kaynak

3

Bootstrap ile bu şekilde yaptım 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
kaynak

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
kaynak

@AjayKumar flex-grow-1Sınıfı karta eklemek, kartın büzülmesini önler.

— Fred

1

Dikey hizalama Bu bootstrap 4 sınıfını kullanarak:

ebeveyn: d-tablosu

VE

çocuk: d-tablo hücresi ve hizala-orta ve metin merkezi

Örneğin:

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

ve ebeveynin daire olmasını istiyorsanız:

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

hangi iki özel css sınıfı aşağıdaki gibidir:

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

Nihai kullanım örneğin:

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

0

İçeriğinizi% 100 yükseklikte bir h-100 olan bir flexbox kap içine yerleştirin. Ardından, justify-content-center sınıfını kullanarak içeriği merkezi olarak yaslayın.

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

-1

.my-autoyor div üzerinde (bootsrap4) css sınıfını kullanın

— Preshan Pradeepa
kaynak

-2

Bootstrap 4.1.3'te:

container > row > columnBir h1başlığın yanında bir bootstrap rozeti ortalamaya çalışırken bu benim için çalıştı .

Ne işe yaradı bazı basit css oldu:

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

veya

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

— phyatt
kaynak