对齐字幕中心＆amp;在Twitter Bootstrap的Carousel模板中的Featurette图像下

Question

我正在尝试将一个数字标题对齐在Twitter Bootstrap的轮播模板中的Featurette图像下方：

http://getbootstrap.com/2.3.2/examples/carousel.html

有谁知道如何做到这一点并让它仍然有效？我尝试添加此HTML：

<figure>
  <img class="featurette-image pull-right image-responsive" src="../images/file.jpg">
  <figcaption>Caption here</figcaption>
</figure>

和这个CSS：

figure {
  display:inline-block;
  margin:10px;
  vertical-align:top;
}

figure img {
  display:block;
  margin:0 auto;
}

figcaption {
  display:block;
  padding:8px;
}

...到模板的现有代码但是甚至没有关闭。有一个简单的解决方案可以在Carousel Template的HTML / CSS中使用吗？

这是一般的featurette部分HTML：

<div class="featurette">
    <a href="#" target="_blank">
      <figure>
        <img class="featurette-image pull-right image-responsive" data-toggle="tooltip" title="title" src="../images/image.jpg">
        <figcaption>test</figcaption>
      </figure>
    </a>

    <h2 class="featurette-heading">Text: <span class="muted">Text</span></h2>
    <p class="lead">Some text.</p>
  </div>

三个大型浏览器图标图像下的中心标题是具体的！     http://getbootstrap.com/2.3.2/examples/carousel.html

Answer 1

添加text-align：center

<figure>
    <img src="http://24.media.tumblr.com/5b3863c2aa84715bec39a06b7b4fa63b/tumblr_mytjrmq67H1rnq2uxo5_400.png" />
  <figcaption>Caption here</figcaption>
 </figure>



figure {
  display:inline-block;
  margin:10px;
  vertical-align:top;
  text-align: center ;
}

JSFIDDLE DEMO

CSS UPDATED：

.carousel-caption {
background-color: transparent;
position: static;
max-width: 550px;
padding: 0 20px;
margin-top: 200px;
text-align: center;
margin: 200px auto;
}

这是你的解决方案很有趣！

<div class="featurette">
    <figure class="row">
         <img class="featurette-image pull-right" src="http://getbootstrap.com/2.3.2/assets/img/examples/browser-icon-chrome.png">
         <figcaption></figcaption>
    </figure>
    <h2 class="featurette-heading text-center">First featurette headling. <span class="muted">It'll blow your mind.</span></h2>
    <p class="lead text-center">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>

JSFIDDLE DEMO SMALL SCREEN

JSFIDDLE FULL SCREEN