【问题标题】:How do I get the caption text of the jQuery to align with the image?如何让 jQuery 的标题文本与图像对齐?
【发布时间】:2013-03-13 02:10:25
【问题描述】:

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

【问题讨论】:

  • 请提供小提琴
  • 这似乎是.carousel-caption CSS 的问题。你没有提供的。
  • @vletech 这个css类由twitter.github.com/bootstrap提供

标签: jquery css twitter-bootstrap carousel


【解决方案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 */ 

}

我希望这可以帮助:)

【讨论】:

  • 抱歉,这只会使标题变大并对齐其中的文本。
  • 你需要让它居中,并改变宽度
  • @Sheldon,从 CSS 中移除高度,抱歉
  • 嘿@Sedz,我明白你想要做什么,但这只会将文本与轮播标题对齐。我想对齐轮播标题元素。
猜你喜欢
  • 2013-11-23
  • 1970-01-01
  • 2015-08-31
  • 1970-01-01
  • 2014-12-31
  • 2012-09-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多