Bootstrap Карусель Текстовый центр

Я работаю с 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>

Источник

2 ответа

Решение

Попробуй это:

.leitbild-text{
  font-size: 2em;
  line-height: 2em;
  height: 5em;
  display: table;
  vertical-align: middle 
  margin:auto;
}
Источник

Добавьте следующий код CSS и увеличьте отступы или добавьте отступы влево или вправо в зависимости от вас.

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

Это сосредоточит ваш текст на карусели.

Источник
Другие вопросы по тегам