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

BiGT-

BiGT-

BiGT-

Associate
Joined
7 May 2009
Posts
837
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….

1ih75t.png


But I replaced the CSS code from…
Code: 
}
 .st_main img.st_preview{
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
}

to this code….

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…

29cw2fr.png


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

Thank you.
 
billysielu said:
thought that's what you wanted ...
Click to expand...

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.

billysielu said:
position:absolute;
width:300px;
height:200px;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-100px;
Click to expand...

This just made the image the same as the last code you sent unfortunately :(
 
DodgeeRascal said:
bit rusty on css but does

setting

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

do the trick?
Click to expand...

Try this width width:auto; as well (and maybe max-width:100% in case the image is larger than the browser window width)-

Code: 
width: auto;
max-width:100%;
margin-left: auto;
margin-right: auto;

From the looks of it the original gallery CSS is setting the width of the image to 100% i.e. the image will be scaled to fit the width of it's parent element ( which appears to be set to match the width of the browser window.)
 
BiGT- said:
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.



This just made the image the same as the last code you sent unfortunately :(
Click to expand...

you'll have to write some code to get the width and height of the image in that case
 
I forgot to update this thread, but my brother worked it out, I had to add

Code: 
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 :D
 
set it as a background image of the body.

Code: 
body {
  background-image: url(/url/to/your/image);
  background-position: center;
  background-repeat: no-repeat;
}

add
Code: 
background-attachment: fixed;
if you don't want it to scroll.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom