Center Image and Caption

[SamL]

Ok this has been driving me crazy. What I want to do is have and image with a caption underneath, and have them both centered. The image is 500px wide, so I want the caption to stay within the that limit, so if the text or caption is longer, it will break to a new line.

This is the CSS I am using:

div.center {
text-align:center;
}

p.caption {
font-family: "Arial", sans-serif;
line-height: 1em;
font-size: 0.68em;
margin-bottom: 0.00em;
margin-top: 0.30em;
margin-right: 0.25em;
margin-left: 0.25em;
}

And this is how my code looks (above and below this div are normal paragraphs in <p> tags):

<div class="center"><img src="images/2_06.jpg" alt="2_06.jpg" />
<p class="caption">A gathering of cellists: Andre Navarra, Zara Nelsova, Milos Sadlo, Adolfo Odnoposoff, (unknown), Maurice Eisenberg, Mstislav Tostropocich</p></div>

Heres a couple screen shots of how this looks in ADE (tried it with different sized fonts.) As you can see, the image is centering properly, but the caption is keeping to the left.



Any help is greatly appreciated, thanks.

[SamL]

Okay, after looking around some more. I've tweaked my CSS a little to this:

p.caption {
font-family: "Arial", sans-serif;
line-height: 1em;
font-size: 0.68em;
margin: 0.3em auto;

}

div.center {
text-align:center;
}

My code looks the same:

<div class="center"><img src="images/2_06.jpg" alt="2_06.jpg" />
<p class="caption" >A gathering of cellists: Andre Navarra, Zara Nelsova, Milos Sadlo, Adolfo Odnoposoff, (unknown), Maurice Eisenberg, Mstislav Tostropocich</p></div>

Now its centering properly, but the text does not stay within the edges of the photo:

[charleski]

Check that you don't have something like
p {
...
text-align: left;
...
}
in your css, since that will override the attribute in the div.

To fix the width, do something like:
p.caption {
font-family: "Arial", sans-serif;
line-height: 1em;
font-size: 0.68em;
margin: 0.3em 15%;
}

.img {
width: 70%
}

with <img src="images/2_06.jpg" class="img" alt="2_06.jpg" />

[SamL]

Originally Posted by charleski

Check that you don't have something like
p {
...
text-align: left;
...
}
in your css, since that will override the attribute in the div.

To fix the width, do something like:
p.caption {
font-family: "Arial", sans-serif;
line-height: 1em;
font-size: 0.68em;
margin: 0.3em 15%;
}

.img {
width: 70%
}

with <img src="images/2_06.jpg" class="img" alt="2_06.jpg" />

Thanks! that did it, all I needed was the

margin: 0.3em 15%;

[charleski]

It's safer to set the width in the image as well, otherwise it'll break on screens that fall outside the norm (i.e. if someone reads the book on their phone), and will also make the code more generally applicable to different-sized images.

[photoluminations]

have been searching for days for this answer. I set the left and right margins to 20%, this makes the text 60%; text-align:center; makes each line center in the 60% box.

[Jellby]

But do you want the box to be always 60%? With a small screen that becomes really tiny!

[photoluminations]

Jellby, a good point. The goal is to have the image fill,or nearly fill, the screen. If the image fills the width, the height tends to overflow the page. I also have a caption that needs to fit under the image...So far, the images seem to fit at 65% without overflowing the page. Next: I may try to enlarge the image and use CSS to move the caption up to display on top of the image. Note: Doing this in epub for color book readers (Nook color) and larger, like the ipad.

[Jellby]

I've arrived to the conclusion that it's not possible to set the size on an image so that it looks fine in all possible screens and orientations, mainly because there's no way to use the screen height in the properties. If there were, I'd suggest:

max-width: 100%;
max-height: 80%;

or something similar with SVG. But that's not the way max-height works.

[SamL]

Jellby, would using

max-width: 100%;
max-height: 80%;

ever give you weirdly sized images? I tried in the past to set both a max height and width, and what would happen is that in some cases, the image would stop resizing at a certain height, but continue resizing in width so I would end up disproportioned sized images.

I haven't tried it with percentages yet, so I think I'll apply it today and see for myself.

[Jellby]

I haven't seen it scaling unevenly, but it could happen in some implementation (I'm not sure what the spec has to say about that).

But anyway, max-height is often pretty useless, because the parent height is usually undefined, so "80%" does not mean "80% of the screen height".

[photoluminations]

I'm still struggling with the problem, somehow a relief to know that others are tool

There are many reading devices with various geometries (HeightXWidth) and various pixel densities. While the possible viewing area examples are not infinite, they are many, and their ranges can be defined. But what it comes down to is that an image can fill the screen either on the height or the width, but no guarantee it will completely fill the screen (unless the image proportions match those of the viewer device). Browsers and web sites interact so the site can deliver correctly formatted stuff to the specific browser, I'm not if aware this can be done in epub.

I will try something like:

width: 100%;
height: auto;

The ipad does enable creating pages that display exactly as planned, but that file will not work on another device. Liza Daly: http://blog.threepress.org/2011/01/1...epubs/(Example by Elizabeth Castro: http://vimeo.com/24579915)