View Single Post
Old 06-25-2011, 09:13 AM   #2
Derek R
Derek R began at the beginning.
Derek R's Avatar
Posts: 87
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
vertical-align code

Maybe to make my meaning a little clearer I should provide the code I have tried:

p.noindent {text-indent:0em;}
p.traffic {text-indent:0em; font-size:140%;}
img.traffic {vertical-align:middle;}

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

I am trying to get the text to align with the middle of the image, but the vertical-align isn't working in the Kindle Previewer. Am I making a fundamental mistake in the code, or does Kindle not support vertical align in css? If it doesn't, is there a simple fix to this?
Derek R is offline   Reply With Quote