Page 1 of 1
Text and image alignment issue
Posted: Tue Mar 24, 2015 8:53 am
by Oda
Hi,
I'm having trouble aligning some text with an image. I produce a web output with the new Top Navigation feature and when I look at the result, the output for web and tablet looks fine:
web_ok.PNG
But the smartphone output looks awful:
mobile_nok.PNG
Here's the piece of code used (it's what i've found on Internet to align a text with the middle lign of an image):
Code: Select all
<p class="ReleaseName">
<img src="../Images/sky.jpg" style="width: auto;height: 140px;" />
</p>
<p style="font-family: 'Lato Light';font-size: 1.5em;"><span style="line-height: 140px;">My text here bla bla bla</span>
</p>
Can anyone help me with that? Thanks
(Using Top Navigation, Flare 11)
Re: Text and image alignment issue
Posted: Tue Mar 24, 2015 9:25 am
by Nita Beck
I can see immediately that the span style you've used is setting the line height of your text to 140px, and that's why you're getting the huge gaps in how it looks on a mobile device.
I think what you need to do is set the position of the image, rather than doing anything with the text. Right-click the image and select Edit Image (in Flare 10) or Image Properties (I think, in Flare 11). On the Position tab, set the Vertical Alignment to Middle. I think that'll do it, but test it. I'm going on memory.
Re: Text and image alignment issue
Posted: Wed Mar 25, 2015 10:30 am
by Oda
Thanks Nita. I tried your solution but with no success. That would have been easy though
During my searches, I had found that vertical alignment is not supported in HTML5. That's why I pasted the piece of code with text line height set to the same height as the image, as it's the only way I've found to have some text vertically aligned to an image on the same line.
Re: Text and image alignment issue
Posted: Thu Mar 26, 2015 5:20 am
by kwag_myers
I generally use a blind table for, what essentially are, two column layouts. I tested the following on Flare's emulator.
Code: Select all
<table border="0">
<tr>
<td>
<p style="font-family: 'Lato Light';font-size: 1.5em;">My text here bla bla bla
</p>
</td>
<td>
<p class="ReleaseName">
<img src="Resources/Images/sky.jpg" style="width: auto;height: 140px;" />
</p>
</td>
</tr>
</table>
Re: Text and image alignment issue
Posted: Thu Mar 26, 2015 7:31 am
by Oda
Thanks kwag_myers, I've tried your workaround and it works just fine!!