Vertical Align Center w Bootstrap 4

322

Próbuję wyśrodkować mój kontener na środku strony za pomocą Bootstrap 4. Do tej pory mi się nie powiodło. Każda pomoc będzie mile widziana.

Zbudowałem go na Codepen.io , abyście mogli się nim bawić i dać mi znać, jak działa mój pomysł ...

Pokaż fragment kodu

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>

Rozwiń fragment kodu

html css twitter-bootstrap flexbox bootstrap-4 canaan seaton
źródło

675

Ważny! Środek pionowy odnosi się do wysokości rodzica

Jeśli element nadrzędny elementu, który próbujesz wyśrodkować, nie ma określonej wysokości , żadne z rozwiązań centrowania pionowego nie będzie działać!

Teraz na pionowe centrowanie w Bootstrap 4 ...

Możesz użyć nowego narzędzia Flexbox i rozmiaru, aby uzyskać containerpełną wysokość i display: flex. Te opcje nie wymagają dodatkowego CSS (z wyjątkiem tego, że wysokość kontenera (np. Html, body) musi wynosić 100% ).

Opcja 1 align-self-centerna urządzeniu potomnym Flexbox

<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

Opcja 2 align-items-centerna urządzeniu nadrzędnym Flexbox ( .rowjest 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

Opcja 3 justify-content-centerna urządzeniu nadrzędnym Flexbox ( .cardjest 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

Więcej na temat centrowania pionowego Bootstrap 4

Teraz, gdy Bootstrap 4 oferuje Flexbox i inne narzędzia , istnieje wiele podejść do wyrównania pionowego. http://www.codeply.com/go/WG15ZWC4lf

1 - Środek pionowy przy użyciu automatycznych marginesów:

Innym sposobem na wyśrodkowanie w pionie jest użycie my-auto. Spowoduje to wyśrodkowanie elementu w jego kontenerze. Na przykład ustawia h-100wiersz na pełną wysokość i my-autowyśrodkuje col-sm-12kolumnę pionowo .

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

Pionowe centrum Korzystanie Auto Marginesy Demo

my-auto reprezentuje marginesy na pionowej osi y i jest równoważny:

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

2 - Centrum pionowe z Flexbox:

Ponieważ Bootstrap 4 .rowjest teraz display:flex, możesz po prostu użyć align-self-centerdowolnej kolumny, aby wyśrodkować ją pionowo ...

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

lub użyj align-items-centercałości, .rowaby wyśrodkować w pionie wszystkie col-*w rzędzie ...

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

Demonstracja kolumn w pionie pośrodku o różnych wysokościach

Zobacz Q / A, aby wyśrodkować, ale utrzymuj jednakową wysokość

3 - Środek pionowy za pomocą wyświetlaczy:

Bootstrap 4 ma narzędzi z ekranu , który może być używany do display:table, display:table-cell, display:inline, etc .. Mogą one być stosowane z pionowych utils wyrównanie , aby wyrównać inline inline bloku lub elementy komórka tabeli.

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

Centrum w pionie za pomocą narzędzia Display Demo

Więcej przykładów
Pionowy obraz środkowy w <div>
pionowym środku. W. W. .Counter
Pionowy środek i dół w <div>
pionowym środku dziecko wewnątrz rodzica
Pionowe środkowe pełny ekran jumbotron

Ważny! Czy wspomniałem o wysokości?

Pamiętaj, że wyśrodkowanie w pionie odnosi się do wysokości elementu macierzystego . Jeśli chcesz wyśrodkować na całej stronie, w większości przypadków powinien to być Twój CSS ...

body,html {
  height: 100%;
}

Lub użyj min-height: 100vh( min-vh-100w Bootstrap 4.1+) na rodzicu / kontenerze. Jeśli chcesz wyśrodkować element potomny wewnątrz rodzica. Rodzic musi mieć określoną wysokość .

Zobacz także:
Wyrównanie w pionie w bootstrap 4
Bootstrap 4 Centrum Wyrównanie w pionie i poziomie

Zim
źródło

1

Kiedy korzystam z powyższej strony z paskiem nawigacyjnym, otrzymuję pasek przewijania. Myślę, że dodaje 100% wysokości poniżej paska nawigacyjnego i centruje na nim. Jak mogę to naprawić?

newdimension

Próbuję wyrównać wiele rzędów do środka za pomocą Flex Box. Chcę wyrównać wszystkie przyciski na środku. codeply.com/go/5abdqC33cU

Coder

Przygotowałem codepen pokazujący obecnie 3 sposoby centrowania w oparciu o sposoby pokazane tutaj: codepen.io/yigith/pen/oNjmGEL

KodFun

23

możesz wyrównać kontener pionowo, uelastyczniając kontener nadrzędny i dodając align-items:center:

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

Zaktualizowano pióro

Pete
źródło

1

ohhh lol, przegapiłem link w opisie ... dodałeś także html, body {height:100%}... dodając, że to zadziałało! Dzięki!

canaan seaton

1

twoja odpowiedź nie rozwiązuje problemu w

zadany

1

W sumie nie zgadzam się z tobą, proponujesz obejście tego problemu, mimo że pytanie dotyczyło tego, jak to zrobić z klasami Bootstrap.

AlexNikonov

@AlexNikonov nie gdzie w pytaniu OP mówi, że ograniczają się tylko do używania bootstrapu - jest to alternatywa dla innych osób, które mogą wylądować na tej stronie, chcąc wyrównać w pionie rzeczy bez użycia klas bootstrap. Po prostu idź dalej - dostępnych jest wiele innych odpowiedzi. Nie rozumiem, dlaczego się tak rozłączasz - jest to forum dla wszystkich pomysłów, które pomogą - nie tylko jednokierunkowe odpowiedzi. Użytkownicy, tacy jak ty, psują tę stronę, odrzucając odpowiedzi, które oferują rozwiązanie problemu, ale tylko dlatego, że go nie lubisz

Pete

@AlexNikonov również, jeśli przeczytasz oryginalny, niezredagowany post (kiedy dodałem moją odpowiedź), zobaczysz również, że OP próbował wyśrodkować bez używania klas bootstrap, więc w momencie odpowiedzi było to prawidłowe

Pete

23

Po bootstrap 4 klasy pomogły mi rozwiązać ten problem

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

Manoj
źródło

1

Nie wyśrodkowało to jednak mojej divy w pionie.

świt

Czy możesz rozwinąć swój kod css. podziel się jego fragmentem, przyjrzałbym się problemowi, z którym się borykasz.

Manoj

12

Ponieważ żadne z powyższych nie działało dla mnie, dodaję inną odpowiedź.

Cel: Wyrównanie w pionie i poziomie div na stronie za pomocą bootstrap 4 klas Flexbox.

Krok 1: Ustaw swój skrajny div na wysokość 100vh. To ustawia wysokość na 100% wysokości Veiwport. Jeśli tego nie zrobisz, nic innego nie zadziała. Ustawienie go na wysokość 100%zależy tylko od rodzica, więc jeśli rodzic nie ma pełnej wysokości rzutni, nic nie będzie działać. W poniższym przykładzie ustawiłem Body na 100vh.

Krok 2: Ustaw div kontenera jako kontener Flexbox z d-flexklasą.

Krok 3: Wyśrodkuj div poziomo z justify-content-centerklasą.

Krok 4: Wyśrodkuj div pionowo za pomocą align-items-center

Krok 5: Uruchom stronę, wyświetl pionowy i poziomy wyśrodkowany div.

Zauważ, że nie ma żadnej specjalnej klasy, która musiałaby być ustawiona na samym środku div (div dziecka)

<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
źródło

@AjayKumar, czy chcesz udostępnić swoje modyfikacje?

Greg Gum

Dzięki, szczególnie 100vhsztuczka bardzo mi pomogła. Bootstrap zapewnia również vh-100klasę do tego.

svens,

10

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

Nate Beers
źródło

5

Wypróbowałem wszystkie odpowiedzi tutaj, ale okazało się, że jest różnica między h-100 a vh-100 Oto moje rozwiązanie:

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

AlexNikonov
źródło

4

W Bootstrap 4 (beta) użyj align-middle. Zobacz dokumentację Bootstrap 4 na temat wyrównania pionowego :

Zmień wyrównanie elementów za pomocą narzędzi do wyrównania pionowego . Należy pamiętać, że wyrównanie w pionie wpływa tylko na elementy śródliniowe , śródliniowe , śródliniowe i komórkowe .

Wybierz z .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, i .align-text-topw razie potrzeby.

vallismortis
źródło

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
źródło

twoje zdjęcia sprawiły, że zacząłem przepełniać stosy zaczęły się reklamy: 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>

W tej linii odbywa się magia <div class="col-md-6 my-auto">, my-autoktóra wyśrodkuje zawartość kolumny. Działa to doskonale w sytuacjach takich jak przykładowy kod powyżej, w którym możesz mieć obraz o zmiennej wielkości i musisz mieć tekst w kolumnie do odpowiedniej linii z nim.

Obrabować
źródło

3

Zrobiłem to w ten sposób z 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
źródło

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
źródło

@AjayKumar Dodanie flex-grow-1klasy do karty zapobiega jej kurczeniu się.

Fred

1

Wyrównanie w pionie Za pomocą tego 4 klas początkowych:

rodzic: d-table

I

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

na przykład:

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

a jeśli chcesz, aby rodzic był w kręgu:

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

które dwie niestandardowe klasy css są następujące:

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

Ostateczne użycie może wyglądać na przykład:

<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
źródło

0

Umieść zawartość w pojemniku Flexbox o wysokości 100%, tj. H-100. Następnie uzasadnij zawartość centralnie za pomocą klasy 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
źródło

-1

use .my-auto(bootsrap4) css class on yor div

Preshan Pradeepa
źródło

-2

W Bootstrap 4.1.3:

To działało dla mnie, gdy próbowałem wyśrodkować plakietkę bootstrap wewnątrz tytułu container > row > columnobok h1tytułu.

To, co działało, to prosty css:

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

lub

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

phyatt
źródło

Vertical Align Center w Bootstrap 4

Odpowiedzi: