Justify Images in Frame using CSS

[gavin31]

I have 3 images in my header frame.

I want to 'justify' align them so that:
the 1st image is left aligned.
the 2nd image is centred.
The 3rd image is right aligned.

I know the align attribute in the img tag is deprecated, so would prefer not to use it.

So 2 questions...

1. Can I do this using CSS and refer to the header frame in the CSS file, and if so how?

2. Or is there a simple way to do this in the header frames html file?

Any help greatly appreciated.

Gavin

 

[MrGTheBeast]

try

<img src="image1.jpg" style="float: left;">
<img src="image3.jpg" style="float: right;">
<img src="image2.jpg">

NOTE: the order is important.

The other option is to use display: inline

eg

<img src="image1.jpg" style="display: inline;">
<img src="image2.jpg" style="display: inline;">
<img src="image3.jpg" style="display: inline;">

another option is to use absolute positioning

 

[Vragabond]

MrG, the second example is needlessly complex -- images by default are rendered as inline elements, therefore explicitly specifying it will have no visible change to the rendering.

 

[gavin31]

MrG

Thanks for the reply.

Unfortunately, neither of those examples worked the way I wanted.

Image 1 & 3 were aligned left and right correctly.

But image 2 was not centred. It was aligned next to image 1 on the left.

I added to the third line (in your first example), thus:
<img src="image2.gif" style="float: center;">
But again this made no difference.

If you have any further ideas they would be most appreciated.

You also mention absolute positioning. Would this have repercusssions i.e. the positioning of images depending on the size browser window used?

Many thanks

Gavin

 

[Vragabond]

Gavin, given MrG's second example, this solution would work:

<div [b]style="text-align: center;"[/b]>
  <img src="image1.jpg" style="float: left;" />
  <img src="image3.jpg" style="float: right;" />
  <img src="image2.jpg" />
</div>

Surely, one would move all this styling to a separate stylesheet eventually. This will work because of the following -- the first two images are floated to the left and right side of the container, being a block level element (every element that is floated is also block level) third image, not being floated as treated as an inline element, thus subject to the text-align property of the parent. That one being center, the picture will appear in the center.

As for your other questions:
- float does not take value 'center' and that's why that does not work;
- absolute positioning has reprecautions but not the ones you mention (if used correctly); since this can be accomplished easier, I would stay clear of absolute positioning.

 

[gavin31]

Vragabond

Thank you!

That has been bugging me for ages.

Your solution works just the way I wanted.

Cheers

Gavin