Text and image alignment issue

This forum is for all Flare issues related to the WebHelp Mobile target and skins
Post Reply
Oda
Propeller Head
Posts: 48
Joined: Tue Apr 15, 2014 6:04 am

Text and image alignment issue

Post 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)
You do not have the required permissions to view the files attached to this post.
Nita Beck
Senior Propellus Maximus
Posts: 3666
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Text and image alignment issue

Post 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.
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
Oda
Propeller Head
Posts: 48
Joined: Tue Apr 15, 2014 6:04 am

Re: Text and image alignment issue

Post 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.
kwag_myers
Propellus Maximus
Posts: 810
Joined: Wed Jul 25, 2012 11:36 am
Location: Ann Arbor, MI

Re: Text and image alignment issue

Post 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>
"I'm tryin' to think, but nothin' happens!" - Curly Joe Howard
Oda
Propeller Head
Posts: 48
Joined: Tue Apr 15, 2014 6:04 am

Re: Text and image alignment issue

Post by Oda »

Thanks kwag_myers, I've tried your workaround and it works just fine!!
Post Reply