Le centrage et l'alignement de la largeur de figcaption balise de l'image dans la figure de la balise

J'ai passé deux jours à tenter de résoudre une fig/figcation problème en vain.

J'ai une application Django où les utilisateurs sont en mesure de soumettre des images et je suis à l'aide de la figure et figcaption tags à afficher l'image, accompagnée d'une légende. Le principal problème est que la légende de la largeur dépasse la largeur de l'image.

J'essaie de trouver un moyen pour que l'image reste la même taille et la légende de la ligne dans la largeur en conséquence. Je suis en utilisant Twitter Bootstrap. Je suis ouvert à toutes les solutions. De l'entrée, de l'expérience ou des conseils très apprécié.

Mise à JOUR: il s'agit du modèle HTML code et CSS:

        <div class="span4 offset2">
                {% if story.pic %}
                    <h2>Image</h2> 
                    <figure width="{{story.pic.width_field}}">
                    <img class="image"src="{{ story.pic.url }}" width="{{story.pic.width_field}}" alt="some_image_alt_text"/>
                    {% if story.caption %}
                        <figcaption>
                                                {{story.caption}}
                        </figcaption>
                    {% endif %}
                    </figure>
                {% endif %}
        </div>


 image {height:auto;}

 figure {margin:0; display:table;} 

figcaption {display:table-row;
max-width: 30%;
font-weight: bold;}
Êtes-vous le réglage de la img à un pourcentage width? Ou êtes-vous laisser sans width? Je devine que vous avez le img ensemble de width: 100%.

OriginalL'auteur Why Not | 2012-07-12