Question

我正在使用Bootstrap 3，并希望将旋转木马用于没有img-background的文本语句。不幸的是，我无法将文本放在旋转木马的中心。它似乎总是在左侧。指标完全居中。

.leitbild-text{
  font-size: 2em;
  line-height: 2em;
  height: 5em;
  display: table-cell;
  vertical-align: middle 
}

.leitbild-bg{
  background-color: #ededed;
  margin: auto;
  padding:auto;
}

.leitbild-item{
  background-color: red;
}

<div class="row">
  <div class="col-md-12 col-sm-12 text-center leitbild-bg">

    <div id="leitbild-carousel" class="carousel slide" data-ride="carousel">
      <!-- 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>
      </ol>

      <!-- Wrapper for slides -->
      <div class="leitbild-carousel carousel-inner">
        <div class="item active leitbild-item">
          <p class="leitbild-text">Wir fördern die Leichtathletik im Allgemeinen und die Jugendarbeit im Speziellen.</p>
        </div>

        <div class="item leitbild-item">
          <p class="leitbild-text">Wir bieten Leichtathletiktrainings in sämtlichen Disziplinen und für alle Alters- und Leistungsstufen an.</p>
        </div>

        <div class="item leitbild-item">
          <p class="leitbild-text ">Wir fördern eine aktive Wettkampfteilnahme.</p>
        </div>

        <div class="item leitbild-item">
          <p class="leitbild-text">Wir pflegen die Kameradschaft und Geselligkeit.</p>
        </div>

        <div class="item leitbild-item">
          <p class="leitbild-text">Wir organisieren regelmässig Leichtathletikanlässe vereinsintern und auf kantonaler bis nationaler Ebene.</p>
        </div>

        <div class="item leitbild-item">
          <p class="leitbild-text">Wir stellen die notwendige Trainings-Infrastruktur zur Verfügung und bauen sie gezielt aus.</p>
        </div>

        <div class="item leitbild-item">
          <p class="leitbild-text">Wir fördern die Leichtathletik in der Region und arbeiten dazu eng mit den polysportiven Vereinen zusammen.</p>
        </div>

        <div class="item leitbild-item">
          <p class="leitbild-text">Wir fördern unsere Trainer durch gezielte Aus- und Weiterbildung.</p>
        </div>

        <div class="item leitbild-item">
          <p class="leitbild-text">Wir stellen eine gesunde Finanzierung des Vereins sicher.</p>
        </div>

      </div>


    </div>


  </div>
</div>

Answer 1

试试这个：

.leitbild-text{
  font-size: 2em;
  line-height: 2em;
  height: 5em;
  display: table;
  vertical-align: middle 
  margin:auto;
}

Answer 2

添加以下css代码并根据您增加填充或添加填充左侧或右侧。

.carousel-caption{
  padding-bottom: 100px;
}

这会将您的文字置于旋转木马上。

Bootstrap Carousel文本中心

2 个答案: