0

カルーセルに問題があります。キャプションを画像と同じ幅にしたいのですが、今は内側のアイテムクラスと同じ幅に設定されています。

次の効果が得られます。

ここに画像の説明を入力

キャプションを中央に配置する (画像に合わせて配置する) ようにキャプションを設定する方法はありますか?

私のマークアップは次のとおりです。

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
      <div class="inner-item">
        <img src="img/1.jpg">
      </div>
      <div class="carousel-caption">
        <p>Caption</p>
      </div>
    </div>
    <div class="item">
      <div class="inner-item">
        <img src="img/1.jpg">
      </div>
       <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
    <div class="item">
      <div class="inner-item">
        <img src="img/1.jpg">
      </div>
       <div class="carousel-caption">
        <p>Caption text here</p>
      </div>
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
4

1 に答える 1

1

私があなたの質問を正しく理解していれば、なぜtext-align:center; キャプションに使用せず、幅を画像の幅に変更しないのですか

.carousel-caption
{
    text-align:center;
    width:800px; 
    /*If you are having aligning problems and the position is absolute or relative use left:some_number px or margin if not absolute */ 

}

これが役立つことを願っています:)

于 2013-03-12T18:02:52.003 に答える