[JSWolf]

Originally Posted by graycyn

Are you doing your test with a valid epub3?

I was under the impression that you neither believe much in epub3 nor make them. If you are trying to test an HTML5 element in an epub2, I'm not sure it would work! So don't do that!

Grab any purchase or freebie you have that is epub3 (I know you know how to strip DRM.), make a copy. Open it in Sigil or Calibre editor. Add a <figure> somewhere, between paragraphs, appropriately styled, and an image, or some text within and maybe some margins. Do the same with a <div> and style identically. Probably best to put your added CSS tail end of whatever the publisher has done.

They should look identical when opened in ADE 2.0.1.

<figure class="your class">
<p>Some text here</p>
<img src="add source here"/>
<figcaption>More text here</figcaption>
</figure>

<div class="your class">
<p>Some text here</p>
<img src="add source here"/>
<p class="caption">More text here</p>
</div>

CSS:

figure, figcaption {display: block;}

You should be able to see both the <figure> and the <div> display as a block elements.

Otherwise, I don't think I have anything that is public domain handy right now, I could make something, but I don't have a lot of spare time today. My time on the computer is limited, my spine can't take tons of sitting, my eyes can't take tons of computer display.

I know you understand CSS, so you ought to be able to figure this one out.

This code doesn't do anything. It's the same as a blank <div>.

Try this and tell me if it works for you.

CSS

body {
  widows: 1;
  orphans: 1;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: justify;
}
img {
  max-height: 100%;
  max-width: 100%;
}
figure.cover {
  text-align: center;
  text-indent: 0;
  height: 100%;
}

HTML

<figure class="cover">
<img alt="" class="cover" src="cover image here"/>
</figure>