Question

当我尝试在Bootstrap cols中垂直居中某些内容时，我遇到了一些问题。

在这个例子中，我喜欢将整个内容垂直居中在页面-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

试试这个

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

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

Answer 2

如何给.hws-page一个位置：relative，和.hws position：absolute。

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/

Bootstraps中的垂直中心内容

2 个答案: