Center Images

@Rain_LoverMar 26.2010

Hi,

I created a simple slideshow:

[CODE]<html> <body>

</body> </html>[/CODE]

The problem is my images are of different sizes and they don’t center in the iframe. How can I resolve the problem? Any suggestion is greatly appreciated!

Kind regards
Rain lover

to post a comment

HTML

16 Comments(s) _↴

@tirnaMar 26.2010 — #Maybe try the following:

1) set the width of the images' containing div equal to the total widrh of the images.

2) giv the div a style of margin: 0px auto 0px auto;

@Rain_LoverauthorMar 26.2010 — #Thanks for the answer!

Is that what you mean:

[CODE]<div style="width:1148px;margin: 0px auto 0px auto;"> 
 <iframe src="http://lh4.ggpht.com/_qkZzGyIkXmo/S6yTNbhSskI/AAAAAAAADKo/IjVMzaM42Kk/s800/image1.jpg" width="448" height="336" name="iframe_a"> 
 </iframe> 
 </div> [/CODE]

If so, it doesn't work.

@yamaharussMar 26.2010 — #That margin will only define how the div is set, not it's content. Try adding text-align:center to it's style.

@Rain_LoverauthorMar 26.2010 — #That margin will only define how the div is set, not it's content. Try adding text-align:center to it's style.[/QUOTE]

It centers the whole iframe, not the image inside it.

@tirnaMar 26.2010 — #no, I meant the total width of the images within the div.

I see your image width in the iframe is 448px

Try changing

[code=html] 
 <div style="width:1148px;margin: 0px auto 0px auto;">
 [/code]

[code=html] 
 <div style="width:448px;margin: 0px auto 0px auto;">
 [/code]

I now get a 448px wide centered iframe with a creamy coloured hous in my IE8 browser.

Add a bit to the height and width of the div to get rid of the scroll bars.

[B]BTW:[/B] why put the image in an iframe? You could just use an <img /> tag inside the div and you won't have to worry about the scroll bars and your image will be automatically centred.

@Rain_LoverauthorMar 26.2010 — #It works well for the first image as it's 448x336 px. But for the smaller images (images 2 & 3) it doesn't work.

@tirnaMar 26.2010 — #Try the following.

In IE8 it centres the large image and then centres the 3 smaller ones in a line directly below the large image

[code=html] 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title></title>
 
 
 
 </head>
 <body>
 
 <div style="width:448px; margin: 0px auto 0px auto;"> 
 <iframe src="http://lh4.ggpht.com/_qkZzGyIkXmo/S6yTNbhSskI/AAAAAAAADKo/IjVMzaM42Kk/s800/image1.jpg" width="448" height="336" name="iframe_a"> 
 </iframe>
 
 </div>
 
 <div style="width:265px; margin: 0px auto 0px auto;"> 
 <a href="http://lh4.ggpht.com/_qkZzGyIkXmo/S6yTNbhSskI/AAAAAAAADKo/IjVMzaM42Kk/s800/image1.jpg" target ="iframe_a"><img src="http://lh4.ggpht.com/_qkZzGyIkXmo/S6yTNbhSskI/AAAAAAAADKo/IjVMzaM42Kk/s800/image1.jpg" width="80" height="60" /></a> 
 
 <a href="http://lh3.ggpht.com/_qkZzGyIkXmo/S6yTTic4mTI/AAAAAAAADKs/4eJn_aJuMyk/s800/image2.jpg" target ="iframe_a"><img src="http://lh3.ggpht.com/_qkZzGyIkXmo/S6yTTic4mTI/AAAAAAAADKs/4eJn_aJuMyk/s800/image2.jpg" width="80" height="60" /></a> 
 
 <a href="http://lh5.ggpht.com/_qkZzGyIkXmo/S6yVdtKSofI/AAAAAAAADLQ/wSg6hOHzlFs/s800/image3.jpg" target ="iframe_a"><img src="http://lh5.ggpht.com/_qkZzGyIkXmo/S6yVdtKSofI/AAAAAAAADLQ/wSg6hOHzlFs/s800/image3.jpg" width="80" height="60" /></a> 
 </div>
 
 </body>
 </html>
 [/code]

@tirnaMar 26.2010 — #If you want the smaller images centred as well in the iframe when you click on them, then you will need a javascript function that is called when you click the thumbnail link that will resize the width of the iframe container div to the width of the enlarged thumbnail.

@Rain_LoverauthorMar 26.2010 — #Yes, that's exactly what I want, but I cannot use JavaScript in my Site.

@tirnaMar 26.2010 — #why can't you use javascript on your site?

@cootheadMar 27.2010 — #I suggested to Rain Lover that he/she used html files instead of img files to ensure centering but he/she said...
[color=navy]Thanks for the answer, but I can't create a single page for each image. I'm going to have a slideshow of

200 images and it can be very cumbersome and time-consuming. [/color][/quote]
So I did a javascript solution for him/her here...
[list]

[*]http://www.htmlforums.com/showpost.php?p=736894&postcount=4

[/list]
...but he/she said...
[color=navy]Yes, that's exactly what I want, but I cannot use JavaScript in my Site. [/color][/quote]
I have a sneaky suspicion that he/she is just extracting the urine. ?

[i]coothead[/i]

@Major_PayneMar 27.2010 — #Your question was answered HERE, too. ?

@tirnaMar 27.2010 — #hhhmmmm... I wonder if he/she is actually a student and they haven't covered javascript in the course yet and that is why they don't want to use JS ? ?

@Rain_LoverauthorMar 28.2010 — #why can't you use javascript on your site?[/QUOTE]

Do you know [I]Google Sites[/I]? On Google Sites you cannot use JavaScript.

hhhmmmm... I wonder if he/she is actually a student and they haven't covered javascript in the course yet and that is why they don't want to use JS[/QUOTE]

I'm not a student, but I'm interested in web designing and read articles at times.

@Rain_LoverauthorMar 28.2010 — #I suggested to Rain Lover that he/she used html files instead of img files to ensure centering but he/she said...

So I did a javascript solution for him/her here...
[list]

[*]http://www.htmlforums.com/showpost.php?p=736894&postcount=4

[/list]
...but he/she said...

I have a sneaky suspicion that he/she is just extracting the urine. ?

[i]coothead[/i][/QUOTE]

Thanks so much for sharing your knowledge and expertise with us! ?

Your solution is really nice, but I can't use it on my Site.

@cootheadMar 28.2010 — #Hi there Rain Lover,
[color=navy]Do you know Google Sites? On Google Sites you cannot use JavaScript.[/color][/quote]
and
[color=navy]

I'm not a student, but I'm interested in web designing

[/color][/quote]
Well, if you are really interested in web designing and want real solutions to your problems,

then you should seriously consider getting a real site. ?

I am sure that one would not cost you an arm and a leg. ?

My site costs about £1 or $1.50 per week.

[i]coothead[/i]

Also in #HTML _↴

Page will redirect Closing Parent Window external pages in iframe - scrollbar colour problem

Success!

Help @Rain_Lover spread the word by sharing this article on Twitter...

Tweet This

Center Images

16 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Center Images

16 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

16 Comments(s) _↴

Also in #HTML _↴