我遇到carousel的问题。我想使标题与图像的宽度相同,但现在它设置为与内部项目类相同的宽度。
我得到以下效果:
有没有办法设置标题,使其居中(并与图像对齐)?
我的标记是:
<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">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
答案 0 :(得分: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 */
}
我希望这可以帮助:)