Resized images aren't staying left-aligned

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
BBTechWriter
Jr. Propeller Head
Posts: 4
Joined: Tue Jun 25, 2019 8:00 am

Resized images aren't staying left-aligned

Post by BBTechWriter »

Images stay left aligned in my numbered list when they are 100% width. But when I resize to anything smaller, it moves further and further right the smaller I made its width.

Here is the code in my CSS for img.

Code: Select all

	img
	{
		width: 100%;
		max-width: 100%;
		line-height: 22px;
		display: block;
		border-radius: 0px;
		margin: auto;
		text-align: left;
	}
Is this a bug or am I missing something completely? Since images on this site are impossible to show in the thread (thanks MadCap), the link below shows top image at 75% and image beneath it at 100%, both using the same CSS img tag.
https://imgur.com/ZhyDrmo
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Resized images aren't staying left-aligned

Post by Psider »

Setting margin: auto automatically selects a size for each margin. I think for top and bottom it uses 0, but for left and right it equally divides the space not taken up by the item. Basically it centers the element on the page.

So if your screen width is say 900px and your image is 100px wide, then the left and right margins are going to be 400px each.

If you don't need any margin you could just delete the property (I think by default it's 0, but I could be wrong). Or set it to zero. Otherwise you could set a specify left margin, so that it never strays too far right.
BBTechWriter
Jr. Propeller Head
Posts: 4
Joined: Tue Jun 25, 2019 8:00 am

Re: Resized images aren't staying left-aligned

Post by BBTechWriter »

Beautiful. Thanks for the response!
Post Reply