9
Twitter Bootstrapサイトでカルーセルの位置を変更しようとしています。私がしようとしているのは、画像の中央にキャプションを表示することです(上から左に揃えて中央に)。今はちょうど底に整列しています。次のようにTwitter Bootstrapカルーセル画像キャプチャの配置とスタイリング
コードは次のとおりです。 -
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active" id="home-carousel-inner">
<img src="media/39440/CHI-3-4-2048x1152-v31931.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Another dsdaf headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<div class="item">
<img src="media/39468/CIH-1-2048x1152-v31931.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<div class="item">
<img src="media/32602/CIH-2-2048x1152-1931.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Browse gallery</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
それは今のところ、このような何か...
だろう、それは次のようになります -