How Do You Vertically Center a Div?

I'm creating a website for a friend of mine. He wanted me to

1. vertically align the entire site to the browser window, and 2. also the title and caption for his photogallery

Below is a link to the site I'm working on

http://theo.mypreview.co.uk/gallery/test

Code (markup):

I added some javascript and was able to achieve the following

(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
	return this.each(function(i){
	var ah = $(this).height();
	var ph = $(this).parent().height();
	var mh = (ph - ah) / 2;
	$(this).css('margin-top', mh);
	});
};
})(jQuery);

Code (markup):

http://www.seodenver.com/simple-vertical-align-plugin-for-jquery/


If you follow the link posted to the site I'm working on you should see 3 thumbnails, 1st thumbnail is a video which is my main struggle to center vertically. The other 2 thumbnails are for images. If you click on one of the thumbnails for a picture you will see how the title and caption align vertically (not quite center)* For some reason the div containing the main image content ignores the height so the margins are too big.

*Video is posted within the span class called "phototext" which is where the descriptions for the images appears.
side note - this javascript seems stop IE6 and 7 from loading the page

 

That code you have pasted is a function, to centre the DIV, below this you need to call the function, passing it the Div ID or CLASS (as all JQUery works). Example Below

$('.phototext').vAlign();

Code (markup):

It look slike it may already be working, but it seems to be taking the height from the top of the page to the top of the footer??

 

Thanks for the reply, I removed the code, and just made the margin 25%, I will try out your code but where do I insert it? I'm assuming the function goes into the header, then the call goes somewhere in the body??

<script type="text/javascript">
(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
	return this.each(function(i){
	var ah = $(this).height();
	var ph = $(this).parent().height();
	var mh = (ph - ah) / 2;
	$(this).css('margin-top', mh);
	});
};
})(jQuery);
</script>

Code (markup):

<script type="text/javascript">
$('.phototext').vAlign();
</script>

Code (markup):

Like so, or have I got this completely wrong?

 

This is quite frustrating!

On a quick side not, I'd suggest putting some extra style on <ul id="pikame" class="gallerywrap2">
- either #pikname or .gallerywrap2 in your CSS, which will be overflow:none; or overflow:scroll;
See Below:

#pikname{
   overflow:none;
}

HTML:

This will hide the video as the second frame (the image) loads - if Javascript is disabled, only the first image will show.

The way around this is to use the second option

#pikname{
   overflow:scroll;
}

HTML:

This option allows vertical scrollbars to ensure usability is enformced even when there is a javascript error. A call should be written in Javascript to set the overflow back to none, like the following:

$('#pikname').css('overflow', 'none');

Code (markup):

This method means it'll work well if both Javascript is on or off.

Bakc to the V-Align Dilemma. I'd suggest playing with JQuery a little more - have you got a local test server set up on your PC? Try WAMP(PC) or MAMP(Mac) and develop a few pages with individual JQuery libraries - you'll get more of a feel for how JQuery works and where to include stuff.

For now, I'd reccommend putting your plugin and call into a .js file, copy and paste from here:

$(document).ready(function() {
	(function ($) {
		$.fn.vAlign = function() {
			return this.each(function(i){
				var ah = $(this).height();
				var ph = $(this).parent().height();
				var mh = (ph - ah) / 2;
				$(this).css('margin-top', mh);
			});
		};
	});
	$('#pikname').vAlign();

});

Code (markup):

So now, in your header, in this order, load your javascript:
1. JQuery
2. The Above code in a .js file

And it might work!

 

wow thanks for your efforts, I created a js file called vAlign.js

I've added the overflow:scroll to the #pikame

I am unsure how to implement the following step - $('#pikname').css('overflow', 'none');

So at the moment all the main content is appearing with the thumbnails

 

You need to whack that code in the javascript, under this line: $('#pikname').vAlign();
but within the closing brackets of the line underneath.

Also explicitly set the size of the wrapper in height and width, and then explicitly set the size of each frame (i think you're using <UL><LI>, if I remember correctly)

The ensure the Javascript is cyctling through them as before.

 

// JavaScript Document
$(document).ready(function() {
	(function ($) {
		$.fn.vAlign = function() {
			return this.each(function(i){
				var ah = $(this).height();
				var ph = $(this).parent().height();
				var mh = (ph - ah) / 2;
				$(this).css('margin-top', mh);
			});
		};
	});
	$('#pikame').vAlign();
    $('#pikame').css('overflow', 'none');
});

Code (markup):

Like so?? This doesn't seem to work, the main images are appearing within the ul#pikame div

Edit: realized you named it "pikname" instead of "pikame", but even after correcting the typo it's still the same

Is it possible that that gallery script is conflicting with this new script. I'm using pikachoose jquery image gallery.

 

If I were you I'd strip it down and build it from the ground up. Your HTML looks solid, and the JQuery should be fine - perhaps target the class name rather than the is #pikname etc.

Then follow a tutorial online for the CSS

 

Thanks for your help. Do you know how I can vertically center the entire website (#body)

 

Wow okay today discovered the display: table cell attribute

.pika_caption{
                height:600px;
                display: table-cell;
		text-align:center;
		color:#464646;
                margin:0 auto !important;
                vertical-align:middle;

		}

Code (markup):

This works almost perfectly in firefox, for some reason the content is no longer cetering horizontally so there is a large margin to the right.

The other problem is that this isn't working in IE7 or IE8, I suspect it may also not work in Safari too.

 

Am I the only one who uses Google these days? http://www.lmgtfy.com/?q=vertical+alignment+css+ie

There are plenty of resources online that will make this work in all browsers.

 

everyone loves a wise ass

Reason I asked was because I was already in communication with cubicaaron, all the above code I posted above was from using google search