Thread: Center Image and Caption
View Single Post
Old 07-26-2011, 05:23 PM   #1
SamL
I mess around with Epubs
SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.SamL once ate a cherry pie in a record 7 seconds.
 
Posts: 82
Karma: 1566
Join Date: Mar 2011
Location: Cambridge, MA
Device: mac, ipad, nook, kindle
Center Image and Caption
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:
Quote:

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):

Quote:
<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 is offline   Reply With Quote