[KevinH]

Hi All,

I am trying to create an epub3 of my father-in-law's memoirs, and I have been stumped trying to get the first figure to align to the centre of the page and keep the figcaption left aligned.

My xhtml code passes EpubCheck and my complete stylesheet passes the W3C check.


Here is a xhtml code snippet at the top of the page. This snippet comes right after the heading tag "Photo Gallery" at the start of the body tag.

  <figure class="tall">
    <img alt="Olga and Johann Wiedmann Wedding Bride and Groom" src="../Images/olga_johann_wedding.jpg"/>
    <figcaption><strong>Olga Lock and Johann Wiedmann Wedding</strong> – My parents on<strong> </strong>their wedding day in 1928.</figcaption>
  </figure>

and here are the relevant parts of the css:

figure {
    page-break-after:always;
    text-align: center;
}

figure.tall {
    width: 65%;
}

figure.wide {
    width: 95%;
}

figure img {
    width: 100%;
}

figcaption {
    text-align: left;
}

and attached is what I am seeing in Sigil's Preview. Notice that the "tall" image has not been centered on the page.

Given that this is epub3, I am trying to use the figure and figcaption tags instead of a div with the img and a p tag for the caption.

What I am doing wrong? Do I have to drop figure and figcaption use and go back to div, img and p tags? Nothing I have tried with css will align the "tall" image to the center of the page without aligning the figcaption as well.

Any hints appreciated?

KevinH