Hello! I've just posted a message about this in the "Introductions" forum, which is undoubtedly the wrong place, so I'll try here. I appreciate that the subject has almost certainly been covered before, but I'm trying to get to grips with aligning text beside images in Kindle. Essentially I want to have an image to the left with the text aligned to the center of that image, but nothing I try seems to work in the Kindle Previewer.
The css I am using is:
p.noindent {text-indent:0em;}
p.traffic {text-indent:0em; font-size:160%;}
img.traffic {vertical-align:middle;}
And the html:
<p class="traffic"><img class="traffic" src="Getting-Started-3.jpg" alt="" width="40" height="40" />Red Light Foods</p>
<p class="noindent">High GI and high calorie foods. Do not eat these if you want to lose weight.</p>
<p class="traffic"><img class="traffic" src="Getting-Started-4.jpg" alt="" width="40" height="40" />Yellow Light Foods</p>
<p class="noindent">Mid-range GI foods. Eat these when you have reached your target weight.</p>
<p class="traffic"><img class="traffic" src="Getting-Started-5.jpg" alt="" width="40" height="40" />Green Light Foods</p>
<p class="noindent">These are low GI, low in calories and low in saturated fat. Eat these if you want to lose weight. Low GI foods make you feel fuller for longer and reduce the craving for that fattening sugar fix.</p>
There may well be something fundamentally wrong with my code, or does Kindle not support vertical-align? If not, is there a fix?
Any tips would be appreciated.