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.