de-vraag
Więcej
Question

Jak wyśrodkować kontener w pionie w Bootstrapie?

I'm looking for a way to vertically center the container div inside the jumbotron and to set it in the middle of the page.

The .jumbotron musi być dostosowany do pełnej wysokości i szerokości ekranu. The .container div ma szerokość 1025px i powinien znajdować się na środku strony (pionowo wyśrodkowany).

Chcę, aby ta strona miała jumbotron dostosowany do wysokości i szerokości ekranu wraz z kontenerem pionowo wyśrodkowanym względem jumbotronu. Jak mogę to osiągnąć?

.jumbotron {
  height:100%;
  width:100%;
}
.container {
  width:1025px;
}
.jumbotron .container {
  max-width: 100%;
} 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
    <div class="container text-center">
        <h1>The easiest and powerful way</h1>
        <div class="row">
            <div class="col-md-7">
                 <div class="top-bg"></div>
            </div>

            <div class="col-md-5 iPhone-features" style="margin-left:-25px;">
                <ul class="top-features">
                    <li>
                        <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
                        <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
                        <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
                        <p><strong>Check</strong><br>Constantly the status of your links.</p>
                    </li>
                    <li>
                        <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
                        <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
                    </li>
                        <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
                        <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
                </ul>
            </div>
        </div>
    </div>
</div>
TylerH
TylerH
Edytowane pytanie 26. września 2019 в 2:47
Programowanie
html
css
twitter-bootstrap-3
twitter-bootstrap
vertical-alignment
Popular videos
« Poprzedni
Następny »
To pytanie ma 1 odpowiedź w języku angielskim, aby je przeczytać zaloguj się na swoje konto.
Solution / Answer

The Flexible box way

Wyrównanie pionowe jest teraz bardzo proste dzięki użyciu Flexible box layout. Obecnie, ta metoda jest obsługiwana w szerokim zakresie przeglądarek internetowych z wyjątkiem Internet Explorer 8 & 9. Dlatego będziemy musieli użyć kilku hacków/polyfills lub różnych podejść dla IE8/9.

Poniżej pokażę Ci jak to zrobić w zaledwie 3 linijkach tekstu (niezależnie od starej składni flexbox).

Uwaga: lepiej jest użyć dodatkowej klasy zamiast zmieniać .jumbotron, aby osiągnąć pionowe wyrównanie. Ja'użyłbym na przykład nazwy klasy vertical-center.

Przykład tutaj (A Mirror na jsbin).

<div class="jumbotron vertical-center"> <!-- 
                      ^--- Added class  -->
  <div class="container">
    ...
  </div>
</div>
.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

Important notes (Considered in the demo):

  1. Wartość procentowa właściwości height lub min-height jest względna w stosunku do height elementu nadrzędnego, dlatego należy jawnie określić height elementu nadrzędnego.

  2. Vendor prefixed / stara składnia flexbox pominięta w zamieszczonym snippecie ze względu na zwięzłość, ale istnieje w przykładzie online.

  3. W niektórych starych przeglądarkach, takich jak Firefox 9 (w której testowałem), kontener flex - .vertical-center w tym przypadku - nie zajmie dostępnej przestrzeni wewnątrz rodzica, dlatego musimy określić właściwość width jak: width: 100%.

  4. Również w niektórych przeglądarkach internetowych, jak wspomniano powyżej, element flex - .container w tym przypadku - może nie pojawić się na środku w poziomie. Wygląda na to, że zastosowany lewy/prawy margin z auto nie ma żadnego wpływu na element flex.
    Dlatego musimy wyrównać go przez box-pack / justify-content.

Aby uzyskać więcej szczegółów i/lub pionowe wyrównanie kolumn, możesz odwołać się do tematu poniżej:

Tradycyjny sposób dla starszych przeglądarek internetowych

To jest stara odpowiedź, którą napisałem w czasie, gdy odpowiadałem na to pytanie. Ta metoda została omówiona tutaj i przypuszcza się, że działa również w Internet Explorerze 8 i 9. I'll wyjaśnić to w skrócie:

W przepływie inline, element poziomu inline może być wyrównany pionowo do środka przez vertical-align: middle deklarację. Spec od W3C:

middle. Wyrównaj pionowy punkt środkowy pola z linią bazową pola nadrzędnego plus połowa wysokości x rodzica.

W przypadkach, gdy rodzic - .vertical-center element w tym przypadku - ma wyraźną wysokość, przez przypadek, jeśli moglibyśmy mieć element dziecka mający dokładnie taką samą wysokość rodzica, bylibyśmy w stanie przesunąć linię bazową rodzica do punktu środkowego dziecka o pełnej wysokości i zaskakująco uczynić nasze pożądane dziecko w przepływie - .container - wyrównane do środka w pionie.

Zbierz wszystko razem

To powiedziawszy, moglibyśmy stworzyć element full-height wewnątrz .vertical-center przez ::before lub ::after pseudo elementy i również zmienić domyślny typ display tego i drugiego dziecka, .container na inline-block.

Następnie użyj vertical-align: middle; aby wyrównać elementy inline w pionie.

Proszę bardzo:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>
.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: " ";
  display: inline-block;
  vertical-align: middle;    /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;

  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
                           /* reset the font property */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

WORKING DEMO.

Ponadto, aby zapobiec nieoczekiwanym problemom na bardzo małych ekranach, możesz zresetować wysokość pseudoelementu do auto lub 0 lub zmienić jego typ display na none, jeśli jest to potrzebne:

@media (max-width: 768px) {
  .vertical-center:before {
    height: auto;
    /* Or */
    display: none;
  }
}

UPDATED DEMO

I jeszcze jedna rzecz:

Jeśli wokół kontenera znajdują się sekcje footer/header, to'lepiej jest odpowiednio wypozycjonować te elementy (relative, absolute? zależy od Ciebie.) i dodać wyższą wartość z-index (dla pewności), aby zawsze były na wierzchu pozostałych.

Community
Community
Edytowana odpowiedź 23. maja 2017 в 12:26
564

dodaj Bootstrap.css następnie dodaj to do swoich css

To jest Css

html, body{height:100%; margin:0;padding:0}

.container-fluid{
  height:100%;
  display:table;
  width: 100%;
  padding: 0;
}

.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}

.centering {
  float:none;
  margin:0 auto;
}

Teraz wywołaj na swojej stronie

<div class="container-fluid">
    <div class="row-fluid">
        <div class="centering text-center">
           Am in the Center Now :-)
        </div>
    </div>
</div>
50

Moja ulubiona technika :

body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

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

Demo

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
  <div class="container text-center">
    <h1>The easiest and powerful way</h1>
    <div class="row">
      <div class="col-md-7">
        <div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      </div>

      <div class="col-md-5 iPhone-features">
        <ul class="top-features">
          <li>
            <span><i class="fa fa-random simple_bg top-features-bg"></i></span>
            <p><strong>Redirect</strong><br>Visitors where they converts more.</p>
          </li>
          <li>
            <span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
            <p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
          </li>
          <li>
            <span><i class="fa fa-check simple_bg top-features-bg"></i></span>
            <p><strong>Check</strong><br>Constantly the status of your links.</p>
          </li>
          <li>
            <span><i class="fa fa-users simple_bg top-features-bg"></i></span>
            <p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
          </li>
          <a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
          <h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
        </ul>
      </div>
    </div>
  </div>
</div>
body {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

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

Zobacz także to skrzypce!

John Slegers
John Slegers
Edytowana odpowiedź 19. maja 2016 в 11:26
8