垂直引導中心內容中的內容

Question

我嘗試在Bootstrap列中垂直居中某些內容時遇到一些問題。

在這個例子中，我喜歡垂直居中頁面hws中的整個內容，其高度爲50vh。

同一問題在leitbild部分。我無法垂直居中文本。

.page-hws { 
 
    height: 50vh; 
 
} 
 
.hws { 
 
    position: relative; 
 
    z-index: 10; 
 
    background-color: #fff; 
 
    display: table; 
 
} 
 
.hws-icon { 
 
    display: block; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    width: 80%; 
 
    height: 80%; 
 
    max-height: 200px; 
 
    max-width: 200px; 
 
} 
 
.hws-fact { 
 
    color: #000; 
 
    font-size: 2em; 
 
    font-family: 'Raleway'; 
 
    font-weight: 500; 
 
    text-align: center; 
 
    padding-bottom: 0.5em; 
 
    display: inline; 
 
} 
 
.hws-fact-container { 
 
    text-align: center; 
 
} 
 
.hws-hashtag { 
 
    font-family: 'Raleway'; 
 
    color: #e28634; 
 
    text-transform: uppercase; 
 
    font-size: 1.3em; 
 
    font-weight: 800; 
 
    text-align: center; 
 
} 
 
.hws-fact-line { 
 
    padding-top: 0.3em; 
 
    font-family: 'Arvo'; 
 
    color: #000; 
 
    font-size: 1em; 
 
    font-weight: 500; 
 
    text-align: center; 
 
} 
 
.hws-text-title { 
 
    font-family: 'Arvo'; 
 
    color: #000; 
 
    text-transform: uppercase; 
 
    font-size: 1.5em; 
 
    font-weight: 800; 
 
} 
 
.leitbild-text { 
 
    width: 100%; 
 
    color: #fff; 
 
    font-family: 'Raleway', Sans-Serif; 
 
    font-weight: 800; 
 
    font-size: 2.5em; 
 
    text-transform: uppercase; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.leitbild-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    position: relative; 
 
    z-index: 4; 
 
} 
 
.carousel-indicators li { 
 
    background-color: #fff; 
 
    border: none; 
 
} 
 
.carousel-indicators .active { 
 
    background-color: #f4980b; 
 
    border: none; 
 
} 
 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    background-color: rgba(15, 32, 59, 0.9); 
 
    padding: auto; 
 
    margin: auto; 
 
    text-align: center; 
 
}

<section class="page-hws" id="page-hws"> 
 
    <!--HWS--> 
 
    <div class="row hws"> 
 
    <div class="col-md-2"></div> 
 
    <div class="col-md-2"> 
 
     <img class="hws-icon" src="img/hoeher.svg" alt="Grafik höher"> 
 
     <div class="hws-fact-container"> 
 
     <p class="hws-fact counter">2.35</p> 
 
     <p class="hws-fact">m</p> 
 
     </div> 
 
     <p class="hws-hashtag">#höher</p> 
 
     <p class="hws-fact-line">Wir springen 2.02 Meter hoch.</p> 
 
    </div> 
 
    <div class="col-md-2"> 
 
     <img class="hws-icon" src="img/weiter.svg" alt="Grafik weiter"> 
 
     <div class="hws-fact-container"> 
 
     <p class="hws-fact counter">4.23</p> 
 
     <p class="hws-fact">m</p> 
 
     </div> 
 
     <p class="hws-hashtag">#weiter</p> 
 
     <p class="hws-fact-line">Wir springen 2.02 Meter hoch.</p> 
 
    </div> 
 
    <div class="col-md-2"> 
 
     <img class="hws-icon" src="img/schneller.svg" alt="Grafik schneller"> 
 
     <div class="hws-fact-container"> 
 
     <p class="hws-fact counter">4.23</p> 
 
     <p class="hws-fact">s/100m</p> 
 
     </div> 
 
     <p class="hws-hashtag">#schneller</p> 
 
     <p class="hws-fact-line">Wir springen 2.02 Meter hoch.</p> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="row"> 
 
     <div class="col-md-2"></div> 
 
     <div class="col-md-8"> 
 
      <h2 class="hws-text-title">Wir geben Alles!</h2> 
 
      <p class="hws-text content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse maiores unde cumque minus tempora accusamus voluptates, ipsum, aliquam vel sapiente necessitatibus excepturi id ratione doloremque ut reprehenderit quia dicta iure?</p> 
 
     </div> 
 
     <div class="col-md-2"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 

 

 
<section> 
 
    <!--leitbild--> 
 
    <div class="row"> 
 
    <div class="col-md-12 col-sm-12 leitbild-container"> 
 

 
     <div id="leitbild-carousel" class="carousel slide" data-ride="carousel"> 
 
     <img class="img-responsive" src="img/leitsatz_bg.jpg" alt="Sprinter des LCF"> 
 
     <div class="overlay"> 
 
      <!-- Indicators --> 
 
      <ol class="carousel-indicators"> 
 
      <li data-target="#leitbild-carousel" data-slide-to="0" class="active"></li> 
 
      <li data-target="#leitbild-carousel" data-slide-to="1"></li> 
 
      <li data-target="#leitbild-carousel" data-slide-to="2"></li> 
 
      <li data-target="#leitbild-carousel" data-slide-to="3"></li> 
 
      <li data-target="#leitbild-carousel" data-slide-to="4"></li> 
 
      <li data-target="#leitbild-carousel" data-slide-to="5"></li> 
 
      <li data-target="#leitbild-carousel" data-slide-to="6"></li> 
 
      <li data-target="#leitbild-carousel" data-slide-to="7"></li> 
 
      <li data-target="#leitbild-carousel" data-slide-to="8"></li> 
 
      </ol> 
 

 
      <!-- Wrapper for slides --> 
 
      <div class="leitbild-carousel carousel-inner"> 
 
      <div class="item active leitbild-item"> 
 
       <div class="text-wrapper"> 
 
       <p class="leitbild-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat corrupti facere odio aut doloremque facilis perspiciatis voluptas ut dignissimos est magni et adipisci blanditiis, illo cumque quisquam, vel hic vero!.</p> 
 
       </div> 
 
      </div> 
 

 

 
      </div> 
 

 

 
     </div> 
 

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

Answer 1

怎麼樣給.hws頁的位置：相對的，.hws的位置是：絕對的。

body,html { 
    /* necessary */ 
    height:100%; 
} 

.page-hws { 
    height: 100%; 
    position: relative; 
} 
.hws { 
    position: absolute; 
    top:50%; 
    z-index: 10; 
    background-color: #fff; 
    display: table; 
} 

https://jsfiddle.net/mv4rosv5/

Answer 2

試試這個

.page-hws { 
    height: 50vh; 
    display: table; 
} 

.hws { 
    position: relative; 
    z-index: 10; 
    background-color: #fff; 
    display: table-cell; 
    vertical-align: middle; 
}