Hi Angela,
It's looks to be under for me. Left justified but under the image, not the
figure.
To be under the figure, you have to take the figcaption out of the figure,
technically.
I think your css declaration is incorrect for how it is structured.
figcaption {
clear: both;
position:absolute;
bottom:0;
left:0;
}
should be
figure figcaption {
clear: both;
position:absolute;
bottom:0;
left:0;
}
My thoughts are that you meant the image inside your figure. To ensure it is
always under the image, just place a <br /> (line break)
<figure style="text-align:center;"><img
src="/resources/images/colleges-staff/upk-help-01.png" alt=""""
width="600" height="341"><br /><figcaption>this is my
caption</figcaption></figure>
But the clear:both in your css should do that already. The <br /> helps for
those with old browsers or css turned off.
If you are using WordPress, make sure that WP isn't putting a <p></p> around
your image.
That may cause issues depending on your p {} declaration in your theme css.
If it is, just place a <div></div> around your image.
This is how I would do it:
<figure><div><img src="/resources/images/colleges-staff/upk-help-01.png"
alt="""" /></div><br /><figcaption>this is my
caption</figcaption></figure>
figure {
position:relative;
text-align:center;
}
figure div {
width:100%;
max-width:600px;
margin:0 auto;
}
figure img {
width:100%;
height:auto;
margin:0;
padding:0;
border:none;
display:inline-block;
}
figure figcaption {
clear: both;
margin: 2%;
}
This will put the caption centered below your image and make the image
responsive.
I hope I understood correctly what you are trying to accomplish.
HTH,
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
> On Nov 28, 2016, at 4:28 PM, Angela French <afre...@sbctc.edu> wrote:
>
>
> I'm having a heck of a time getting my figure caption text to be underneath
> my figure. Thank you for any advice.
>
> http://www.dev.sbctc.edu/_testing/figure-caption.aspx
>
> This is my html:
>
> <figure><img src="/resources/images/colleges-staff/upk-help-01.png"
> alt="""" width="600" height="341">
> <figcaption>this is my caption</figcaption>
> </figure>
>
>
>
>
>
>
>
>
>
> This is my CSS:
>
> figure {
> position:relative;
> }
>
> figure img {
> display:block;
> }
>
> figcaption {
>
> clear: both;
> position:absolute;
> bottom:0;
> left:0;
>
> }
>
>
>
>
>
>
>
>
>
>
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu<mailto:afre...@sbctc.edu>
> www.sbctc.edu<http://www.sbctc.edu/>
>
> ______________________________________________________________________
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
