I'm having a problem with carousel . I would like to make the caption the same width as the image but just now it is set to the same width as the inner item class.
I get the following effect:
Is there a way to set the caption so it is centred (and aligned with the image)?
My markup is:
<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>
If I understand your question correctly Why you don't use text-align:center;
for the caption and change the width to the image's width
.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 */
}
I hope this can help :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.