/    Sign up×
Community /Pin to ProfileBookmark

Center Images

Copy linkTweet thisAlerts:
Mar 26.2010

Hi,

I created a simple slideshow:

[CODE]<html>
<body>

<div>
<iframe src=”http://lh4.ggpht.com/_qkZzGyIkXmo/S6yTNbhSskI/AAAAAAAADKo/IjVMzaM42Kk/s800/image1.jpg” width=”448″ height=”336″ name=”iframe_a”>
</iframe>
</div>
<br>
<div>
<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>
&nbsp;
<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>
&nbsp;
<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]

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) ↴

Copy linkTweet thisAlerts:
@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;
Copy linkTweet thisAlerts:
@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.
Copy linkTweet thisAlerts:
@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.
Copy linkTweet thisAlerts:
@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.
Copy linkTweet thisAlerts:
@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]

to

[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.
Copy linkTweet thisAlerts:
@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.
Copy linkTweet thisAlerts:
@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]
Copy linkTweet thisAlerts:
@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.
Copy linkTweet thisAlerts:
@Rain_LoverauthorMar 26.2010 — Yes, that's exactly what I want, but I cannot use JavaScript in my Site.
Copy linkTweet thisAlerts:
@tirnaMar 26.2010 — why can't you use javascript on your site?
Copy linkTweet thisAlerts:
@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]
    Copy linkTweet thisAlerts:
    @Major_PayneMar 27.2010 — Your question was answered HERE, too. ?
    Copy linkTweet thisAlerts:
    @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 ? ?
    Copy linkTweet thisAlerts:
    @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.
    Copy linkTweet thisAlerts:
    @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.
    Copy linkTweet thisAlerts:
    @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]
    ×

    Success!

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

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 10.12,
    social: @webDeveloperHQ,
    });

    legal: ({
    terms: of use,
    privacy: policy
    analytics: Fullres
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @aldoushuxley,
    tipped: article
    amount: 1000 SATS,

    tipper: Anonymous,
    tipped: article
    amount: 1000 SATS,

    tipper: @linalla,
    tipped: article
    amount: 1000 SATS,
    )...