[Jellby]

Originally Posted by capidamonte

In my opinion, <div>s are overused by everyone. They're particularly overused by computer-generated code, because it's a simple hack.

I get why you've done it here, but classes and ids would work just as well, and would simplify your markup.

In this particular case, I think the use of a <div> is justified, as it marks up some structural element that's going to be handled as a block. I would "simplify" the styling the other way, though:

CSS (no need to use classes for things inside the figure):

div.figure {text-align: center; font-style: italic; font-size: 80%; page-break-inside: avoid;}
/* these two lines should not be needed,
   except to override other styles */
div.figure img {page-break-after: avoid;}
div.figure p {text-align: center; text-indent: 0; page-break-before: avoid;}

XHTML (an id is always useful for references):

<div class="figure" id="figure-01">
<img src="../Images/my-image.jpg" />
<p>This is the caption text.</p>
</div>

I'd add some "margin: 1em 0;" to the div.figure, too, and maybe some top margin to the p inside it.

Oh, text-align: center doesn't apply to images, you have to tweak the margins.

No, but it works fine if it's inside a <div> ADE, for instance, does not support "auto" margins. A <div> also lets you use the page-break-inside, which would work whether the caption comes below or above the image.

An even simpler structure, using generated content and adding the required alt tag:

But I think the ePUB standard does not support generated content, and styling the alt tag would be a nightmare (say you need bold type, images inside the caption, multiple paragraphs, superscripts...)