![]() |
#1 |
Enthusiast
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 29
Karma: 496864
Join Date: Mar 2012
Location: Virginia
Device: none
|
image caption display
In ADE the caption seems to determine the width of the DIV in which the image is placed
https://xmlgirl.tinytake.com/sf/MTY0NDczXzEwMzUyNzA I want it do display like it does in Calibre - wrapping under the width of the image https://xmlgirl.tinytake.com/sf/MTY0NDc1XzEwMzUyNzI <div class="fig"> <img alt="Philippine damage.jpg" src="../Images/Philippine%20damage_fmt.jpeg" /> <p class="caption">Damage from Typoon Haiyan in the Philippines</p> </div> div.fig { margin: 0 0 1em 1em; display: table; float: right; page-break-inside:avoid; } div.fig p { display:table-caption; caption-side:bottom; text-align: center; margin-top:2px; font-size: 0.75em; font-family:Verdana, sans-serif; } Is display: table messing me up again. Is there a better way to do caption? Thank you! |
![]() |
![]() |
![]() |
#2 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,347
Karma: 20171571
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
I've never needed to use display table. I simply put it in a div. Something along the lines of:
Code:
<div class="fig"><img alt="" src="../Images/Philippinedmg.jpg" />Damage from Typoon Haiyan in the Philippines</div> css: div.fig { margin: 1em 0 1em 1em; float: right; page-break-inside: avoid; text-align: center; font-size: 0.75em; font-family: Verdana, sans-serif; width: 25%; (or whatever) max-width: 300px (the actual width of your img to avoid blurring when stretched) } div.fig img { display: block; margin-bottom: 2px } |
![]() |
![]() |
Advert | |
|
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Floating image with caption on its side | roger64 | ePub | 4 | 12-04-2014 04:54 AM |
keeping image and caption together | whbenson | ePub | 0 | 08-20-2013 06:19 PM |
Caption, distance from image | GraciousMe | Sigil | 10 | 10-30-2012 11:12 AM |
L shape image with caption? | LostSock | ePub | 5 | 09-08-2011 07:24 PM |
Center Image and Caption | SamL | ePub | 11 | 08-12-2011 09:27 AM |