Help with epub3 image alignment?

[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

[Jellby]

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

means that the content of the <figure> block is centered, not that the block itself is centered in the outer container. For that you need to either:

(a) put the the <figure> inside another container, say a <div>, that is width:100% and text-align:center; or
(b) give side margins to the <figure> such that it appears centered, like margin:0 auto, or margin:0 17.5% (for figure.tall)

[KevinH]

Ah! Thank you! As you can see I am a better C++ programmer than an epub producer!

I will make those changes.

Edit:
Interestingly, wrapping each figure in a div with class "figimg" and using this style

div.figimg {
     width: 100%;
     text-align: center;
}

did nothing at all.

But your option b: using margin: 0 auto; on each tall figure worked liked a charm!

Thank you!