Align Подписи центр и под изображением Featurette в Carousel Шаблон Twitter Bootstrap в

Question

Я пытаюсь выровнять фигуру заголовок по центру и под Featurette изображений в Carousel Шаблон Twitter Bootstrap в:

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; 
} 

... в существующий код шаблона, но это не было даже близко. Есть ли простое решение для этого, которое работает в HTML/CSS Карусельного шаблона?

Это общий раздел 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

добавить выравнивания текста: центр

<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 ОБНОВЛЕНО:

.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