Vertically center align page: Unable to fix from other examples

[grainspirit]

Please view my horizontal website - www.anishaacharya.com

My CSS follows. I've looked up many tuts and egs to vertically center align but haven't been able to fix it! What I need is for the gallery of images to be vertically center aligned. Desperately looking for a fix!

/*  
Theme Name: Hyku Photo Gallery
Theme URI: http://hyku.com/wp-themes/
Description: A horizontal scrolling theme for photos
Version: 1.0
Author: Josh Hallett
Author URI: http://hyku.com/

*/

body {
background: 
background-repeat: repeat;
font-size: 0px; 
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; text-align: left;
}
a {color: #ebebeb; text-decoration: none;}
a:hover {text-decoration: none; color: #666;}
#header {text-transform: uppercase; letter-spacing: 2px; margin: 0px 0 0 0px;}
#gallery {width: 29000px; margin: 0px 0px 0px 0px;}
#single-image {width: 100%; margin: 0px 0px 0px 0px;}
#photos {margin: 0px 0 0 0;}
.photo {display: inline; vertical-align: middle;}
.image {float: left; width: 1000px; vertical-align: middle;}
.meta {margin: 0px 0px 0px 0px; border-left: 0px dotted #666; padding: 0 0 0 0px; line-height: 0px; vertical-align: middle;}
h2 {font-size: 0px;}
.navigation {float: right; padding: 0px 0px 0 0; vertical-align: middle;}
.pagenavigation {clear: both; margin: 0px 0px 0 0px; vertical-align: middle;}

[kaafmim]

My friend, vertical-align doesn't do anything on an inline element. You should use display:table-cell instead and then vertical-align:middle.

But, this can be difficult to handle. A much simpler way is using this for your container:
(I see that the height of your image is 600px so)

#gallery {
display: absolute;
top: 50%;
margin-top: -300px;
}

Hope it helps!

[grainspirit]

Thank you kaafmim. I tried what you said. The images are moving half out of the window at the top

[kaafmim]

Sorry my friend, I checked and saw that I have had a mistake, this is the right code. I checked it on your website.

#gallery {
position: absolute;
top: 50%;
margin-top: -300px;
}

[grainspirit]

This is great kaafmim! I am really grateful to you..Thank you so much..

I realised a new issue now though. If the screen size is lesser than 600px in height, the image is getting cut off from the top. You can view www.anishaacharya.com now in a minimised (smaller) window to see what im talking about!

[kaafmim]

You are welcome my friend. You can solve this new problem with adding a min-height:600px; to the definition of the #gallery.
something like this:

#gallery {
position: absolute;
top: 50%;
margin-top: -300px;
min-height:600px;
}

Good luck!

[grainspirit]

I'm sorry to be a bug, but adding min-height:600px; to the gallery is not fixing it...I've added it now but if you look at the site, (www.anishaacharya.com), and reduce the window size to a small window, you'll find that the images are getting cut at the top. Sorry kaafmim. Is there any way to scale down images if height of window is lesser than 600px?

[kaafmim]

Add the margin to the height may help you to get the proper results. try min-height:900px; But this won't help you to scale the images.

Yes, there is a pure css solution for that. You should create a css class like this:

.resize {
height: 100%;
width:auto;
}

and apply it to your images, like this:

[code]
<img src="something.jpg" class="resize">
</code]

This will automatically resize the image, keeping the aspect ratio.