[SOLVED] Aligning text inside a <p> and an image <img> vertically (iBooks)

[AlPe]

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:

<p class="question"><img class="question" src="../Images/questionMark.jpg" alt="Domande utili da porsi" />Domande utili da porsi</p>

where the CSS contained:

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> !

<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.

[AlPe]

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.