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

BiGT- · 26 Dec 2013 at 18:25

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…

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…

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

Thank you.

DodgeeRascal · 26 Dec 2013 at 19:06

bit rusty on css but does

setting

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

do the trick?

Randomface74 · 26 Dec 2013 at 19:13

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

BiGT- · 27 Dec 2013 at 00:03

DodgeeRascal said:
bit rusty on css but does

setting

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

do the trick?

Nothing happened, it didn't change anything unfortunately.

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

This just stretched the whole image to fit the window.

Randomface74 · 27 Dec 2013 at 00:06

thought that's what you wanted ...

Randomface74 · 27 Dec 2013 at 00:08

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

BiGT- · 27 Dec 2013 at 00:29

billysielu said:
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.

billysielu said:
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

Oz!asM!dwinter · 29 Dec 2013 at 12:08

DodgeeRascal said:
bit rusty on css but does

setting

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

do the trick?

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

Randomface74 · 29 Dec 2013 at 12:23

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

you'll have to write some code to get the width and height of the image in that case

BiGT- · 29 Dec 2013 at 13:08

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

DodgeeRascal · 29 Dec 2013 at 14:04

Whey! Group effort

Dj_Jestar · 30 Dec 2013 at 00:42

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.

BiGT- · 30 Dec 2013 at 00:57

I have already fixed the problem as mentioned above

Thank for the suggestion though!

Dj_Jestar · 30 Dec 2013 at 01:15

Way cleaner and better semantics to use a background image though