I've spent two days now attempting to resolve a fig/figcation issue to no avail.
I have a Django application where users are able to submit images and I'm using the figure and figcaption tags to display the image with an accompanying caption. The main issue is that the caption width exceeds the picture width.
I'm trying to figure out a way for the image to remain the same size and the caption to line up in width accordingly. I'm using Twitter-Bootstrap as well. I'm open to all solutions. Any input, experience or advice greatly appreciated.
UPDATED: This is the actual HTML template code and 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;}
Use text-align: center on figcaption to align the test to the center.
<figcaption>: The Figure Caption elementThe <figcaption> HTML element represents a caption or legend describing the rest of the contents of its parent <figure> element.
An <img> element is an inline element (display value of inline-block ). It can be easily centered by adding the text-align: center; CSS property to the parent element that contains it. To center an image using text-align: center; you must place the <img> inside of a block-level element such as a div .
figure .image {
width: 100%;
}
figure {
text-align: center;
display: table;
max-width: 30%; /* demo; set some amount (px or %) if you can */
margin: 10px auto; /* not needed unless you want centered */
}
The key is to set some kind of max-width
for the img
on the figure
element if you can, then it will keep both it and the text constrained.
See an example fiddle.
First, this <figure width="{{story.pic.width_field}}">
should be this <figure style="width: {{story.pic.width_field}};">
.
Second, do only this css (nothing else needed for img
or figcaption
; see fiddle):
figure {
text-align: center;
margin: 10px auto; /* not needed unless you want centered */
}
Really small images with long text are still going to have issues, as this fiddle shows. To make it at least look clean, you might check for some minimum size of the img
and if it too small (say, 100px
), then instead of setting width
on the figure
set min-width
to the img
size and set a max-width
to your threshold of 100px
like this fiddle shows.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With