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


AlPe
10-20-2012, 11:20 AM
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
10-20-2012, 12:00 PM
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.