我正在使用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>
答案 0 :(得分:1)
试试这个:
.leitbild-text{
font-size: 2em;
line-height: 2em;
height: 5em;
display: table;
vertical-align: middle
margin:auto;
}
答案 1 :(得分:0)
添加以下css代码并根据您增加填充或添加填充左侧或右侧。
.carousel-caption{
padding-bottom: 100px;
}
这会将您的文字置于旋转木马上。