简体   繁体   中英

How do I get the caption text of the jQuery to align with the image?

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">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM