Image appearing centered when it should be left-aligned

temoff · Post by **temoff** » Tue Apr 14, 2020 12:49 pm

I updated an image to use style "thumbnail" instead of using in-line CSS via the Image Properties menu in Flare.
Since then, the image is appearing centered on the screen rather than left-aligned as it had been prior to applying the "thumbnail" style.
Wrapping it in <p> tags didn't help, though text wrapped in <p> tags does appear left-aligned.

I'm not sure what is prompting it to be centered on page? I've looked through the parent divs and nothing is jumping out at me.

Here is my CSS for img and img-thumbnail:

Code: Select all

img	/*Setting max-width: 100%; property makes images always fit the width of the container*/
{
	max-width: 100%;
}

img.thumbnail
{
	display: inline-block;
	mc-thumbnail: popup;
	max-width: 225px;
	mc-thumbnail-max-height: auto;
	mc-thumbnail-max-width: 150px;
}

Here is the HTML:

Code: Select all

 <body>
        <h1>Join a meeting as a participant</h1>
        <p><img src="../Resources/Images/signin.png" class="thumbnail"/></p>
        <p>Hello World</p>
        <ol>
            <li>On the sign in screen, enter the meeting number. </li>
            <li>Enter a display name.</li>
            <li>Enter an email address (optional).</li>
            <li>Click <b>Join</b>.</li>
        </ol>
    </body>

Here is a screenshot of how it appears:

Gene K · Post by **Gene K** » Tue Apr 14, 2020 2:51 pm

I copied the code you provided into a new Flare topic (factory-default template) and replaced the image with one of my own. It correctly displayed as a thumbnail and stayed left-aligned, so I'm guessing:

Your thumbnail class did not apply to the image correctly, OR
Your thumbnail class is inheriting its alignment from somewhere else in your CSS, OR
There's something else horribly wrong I don't have the knowledge to even attempt fixing.

Perhaps try searching for alignment settings in your CSS to narrow down what you should be looking at? You can also try creating a new test project/topic with JUST the related thumbnail code to see if it works correctly in isolation on your end.

Good luck!

MadCap Software Forums

Image appearing centered when it should be left-aligned

Image appearing centered when it should be left-aligned

Re: Image appearing centered when it should be left-aligned