View Single Post
Old 10-20-2012, 11:20 AM  
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: 583
Karma: 1258323
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:	77
Size:	12.3 KB
ID:	94528   Click image for larger version

Name:	ibooks.png
Views:	79
Size:	38.2 KB
ID:	94529  
AlPe is offline   Reply With Quote