Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 10-20-2012, 12:20 PM   #1
AlPe
Digital Amanuensis
AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.
 
AlPe's Avatar
 
Posts: 597
Karma: 1281565
Join Date: Dec 2011
Location: Padova, Italy
Device: Kindle3, Odyssey, eDGe, A60, PRS-T1, iPad3, KoboGlo
[SOLVED] Aligning text inside a <p> and an image <img> vertically (iBooks)

Hi all,

since I looked for this and did not find any solutions, I would like to share my solution, hoping it will save time and an headache to someone in the future.

The problem
I had the following piece of code:
Code:
<p class="question"><img class="question" src="../Images/questionMark.jpg" alt="Domande utili da porsi" />Domande utili da porsi</p>
where the CSS contained:
Code:
img.question {
    vertical-align: middle;
}
Previewing the above fragment in Firefox (and in ADE, in AZARDI, in ebook-viewer, in Lucidor...) gave the expected result: image and text aligned vertically around their middle point. (See attached firefox.png)
Unfortunately, iBooks aligned the image and the text as if "text-bottom" was selected instead of "middle". (See attached iBooks.png).

The solution
Put the damn' image inside a <span> !
Code:
<p class="question"><span><img class="question" src="../Images/questionMark.jpg" alt="Domande utili da porsi" /></span>Domande utili da porsi</p>
Now even iBooks displays the image and the text as expected.
Attached Thumbnails
Click image for larger version

Name:	firefox.png
Views:	85
Size:	12.3 KB
ID:	94528   Click image for larger version

Name:	ibooks.png
Views:	89
Size:	38.2 KB
ID:	94529  
AlPe is offline   Reply With Quote
Old 10-20-2012, 01:00 PM   #2
AlPe
Digital Amanuensis
AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.AlPe ought to be getting tired of karma fortunes by now.
 
AlPe's Avatar
 
Posts: 597
Karma: 1281565
Join Date: Dec 2011
Location: Padova, Italy
Device: Kindle3, Odyssey, eDGe, A60, PRS-T1, iPad3, KoboGlo
Oh, I forgot: I know that the expected result can be achieved with a table, but, for other reasons, I did not want to use tables.

Last edited by AlPe; 10-20-2012 at 01:03 PM.
AlPe is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
iBooks: Text overflowing image if it's at top of screen. Oxford-eBooks ePub 30 05-10-2013 01:56 AM
How to make TextView inside ViewPager scroll vertically polygrimm Android Developer's Corner 0 07-03-2012 08:59 AM
Right Aligning Wrapped Text Only ghostyjack ePub 7 11-04-2010 09:54 AM
Correctly Aligning Text Within a Table ghostyjack ePub 3 07-28-2010 08:18 AM
How to center an image vertically GBAV ePub 23 06-16-2010 11:41 AM


All times are GMT -4. The time now is 11:45 AM.


MobileRead.com is a privately owned, operated and funded community.