HTML5 / CSS Bleg

I am trying to put images and captions in a figure tag, put the image to the left side of the screen, and center the caption underneath the image. Everything I read online says I just need to put 'text-align: center' in my CSS file for the figcaption tag, and I should be good to go. But when I do this, at least on Safari, the caption gets centered on the page, not under the image!

Here's a page where I was attempting this (I've now centered the image itself in despair).

And here's the CSS file definitions of figure and figcaption:


figure {
    text-align: center;
/*    margin: 12px 20px 12px 100px;  */
}

figcaption {
    color: #606;
    font-style: italic;
    text-align: center;
    margin: 16px 20px 12px 20px;

}


Does anyone have any idea what is going wrong here?

1 comment:

  1. No idea, but letting you know that your link URL starts with file://

    ReplyDelete