Help with trying to centre image in HTML & CSS (w/ jQuery)

[BiGT-]

Hi, so I am trying to make a very basic site using a free HTML/CSS gallery with jQuery, but I can't seem to get the image to show full and be centred.

I am using this gallery -> http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/
Which you can download the source and see for yourself

I have added some of my own edits and additions of my images, but the original code makes my images zoom in like this….

But I replaced the CSS code from…

}
 .st_main img.st_preview{
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
}

to this code….

}
.st_main img.st_preview{
	position:fixed;
	left:0%;
	top:0%;
	height:auto;
	width:auto;
}

Which solved my problem of showing the full image, however for some reason its to the left of the screen like this…

So can anyone help me out? I just want my images to be in the centre of the page

Thank you.

 

[BiGT-]

bit rusty on css but does

setting

margin-left: auto;
margin-right: auto;

do the trick?

Nothing happened, it didn't change anything unfortunately.

position:absolute;
width:100%;
height:100%;
left:0;
top:0;

This just stretched the whole image to fit the window.

 

[BiGT-]

thought that's what you wanted ...

I want the original aspect ratio, nothing stretched, nothing chopped off, just like the second picture I posted but instead of the image being on the left and a black border on the right, I want the image in the middle of the page, even if the border is on both sides.

position:absolute;
width:300px;
height:200px;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-100px;

This just made the image the same as the last code you sent unfortunately

 

[BiGT-]

I forgot to update this thread, but my brother worked it out, I had to add

display:block;
margin-left: auto;
margin-right: auto;

So DodgeRascaal was almost there but the display:block was the missing code.

But then I had the problem that because my screen resolution is quite big, I didn't realise that it was displaying the images in full so when I reduced the browser size, the image was still huge and being cut off, so I added Oz!asM!dwinter's width:auto; and max-width:100%; into my current code and it fixed it (it doesn't fit when the browser is tiny but when its halved it does so thats fine with me )

So thanks very much guys everything works best when we work together

 

[BiGT-]

I have already fixed the problem as mentioned above

Thank for the suggestion though!