/    Sign up×
Community /Pin to ProfileBookmark

X/Y centering of image in Div on from image object

Hey all,

I’ve created a little image upload feature for my website, where all images for my current page are preloaded into a JS array of image objects. I resolved my issues for resizing the images according to maximum x,y values, however, I can’t seem to get the images to center.

[B]HTML[/B]
<div id=”image_window”><a href=”media.php”><img src=””></a></div>
<a onclick=”prev( );”>prev</a>
<a onclick=”next( );”>next</a>

[B]Javscript[/B]
function next_image( )
{
image_current = ( image_current == image_total-1) ? 0 : image_current+1;
image_window.firstChild.firstChild.width = image_array[image_current][3];
image_window.firstChild.firstChild.height = image_array[image_current][4];
image_window.firstChild.firstChild.src = image_array[image_current][0].src;
}

function prev_image( )
{
image_current = ( image_current == 0) ? image_total-1 : image_current-1;
image_window.firstChild.firstChild.width = image_array[image_current][3];
image_window.firstChild.firstChild.height = image_array[image_current][4];
image_window.firstChild.firstChild.src = image_array[image_current][0].src;
}

[B]CSS[/B]
#image_window
{
width: 315px;
height: 280px;
text-align: center;
vertical-align: middle;
}

Image_current and image_total are obvious globals. The image_window is a global referencing the div object and image_array contains the src @ [current][0], x value @[current][3], and y value @[current][4].

I have tried a lot of ways, but haven’t found one yet to center the images in the div. Does anyone have any ideas or advice?

-matt

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@gphApr 02.2006 — Use a table
Copy linkTweet thisAlerts:
@cyberlogiauthorApr 02.2006 — I originally had a table, but it won't work for my needs. Anybody have a solution using divs?
Copy linkTweet thisAlerts:
@gphApr 02.2006 — Why doesn't a table work?
Copy linkTweet thisAlerts:
@cyberlogiauthorApr 03.2006 — Because, border-collapse doesn't work in netscape 6 and i've found no other way to remove the extra white spaces related to a table.
×

Success!

Help @cyberlogi 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 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...