Centre Aligning a Div

[Beverleyh]

Maybe one of these methods will work? http://blog.themeforest.net/tutorial...ring-with-css/

[Richard Cousins]

I cant seem to make these work. Maybe I'm doing it wrong. Has anyone been able to look at my code?

[Beverleyh]

I'm not sure but I think the issue is with you having all the content in one long page of chained divs.

Normally when you vertically align body content with CSS you can set the central div to a top position of 50% (of the visible screen body) but then offset it with a negative top margin that is half the height of the central div, thus pulling the central div back up to a seemingly central position on any viewing screen.

This I don't think will work here because the body contains all if your pages in one long chain of divs.

I think maybe you'll need to take a different approach, possibly with JavaScript to identify the height of the viewport (the viewing browser height) and setting that dynamically to be the height of the containing div. From there I imagine that you could then give the link container a top position of 50% with the margin-top negative offset that is half the height of the link container.

I haven't explored any further but hopefully one of these routes will start you off http://www.google.com/m?q=jQuery%20g...%20align%20div

[Richard Cousins]

Thank you Bereleyh. I'm looking into it now.

One thing I noticed that I might be doing wrong is I was trying to make a div that was already within a div go into the centre of the page. Now I am trying to centre all of the content. For my site which is a single page everything is contained within #wrapper. So what I have done is this:

#wrapper {position: absolute; width:940px; height:8800px; margin:0 auto; left:50%; top:10%; margin-left:-470px;}

Now if I add margin-top:-4400px all it does it lift all off the content up and off of the screen. The top: ""% works but I cant centre it perfectly. Any ideas which doing it this way it wrong?

[Beverleyh]

You're getting into a right pickle, aren't you

OK looking at the code from here: http://stackoverflow.com/questions/6...iewport-height let's borrow the jist of that function and do this...

At the bottom of your page, insert the red code into your script tags;

<script type="text/javascript">
function vp_height() {
    var height = $(window).height();
    $("#storm-home").css('height', height+'px');
}
$(document).ready(function() {
    vp_height();
    $(window).bind('resize', vp_height);
$.piroBox_ext({
piro_speed :700,
bg_alpha : 0.5,
piro_scroll : true,
piro_drag :false,
piro_nav_pos: 'bottom'
});
});
</script>

Now, in your HTML higher up the page, wrap another div inside #storm-home;

	<article id="storm-home">
	<div id="centerme" style="height:600px; position:relative; top:50%; margin-top:-300px">
		<div><a href="#storm-dfx" class="home-create"> </a></div>
		<div id="text-box1"><img src="http://www.stormdfx.com/stormdfx/img/text-block1.png" alt="text" width="940" height="25" /></div>
		<div><a href="#service" class="home-create1"> </a></div>
		<div id="text-box2"><img src="http://www.stormdfx.com/stormdfx/img/text-block2.png" alt="text" width="940" height="19" /></div>
		<div><a href="#finger-pulse" class="home-create2"> </a></div>
		<div id="text-box33"><img src="http://www.stormdfx.com/stormdfx/img/text-block3.png" alt="text" width="940" height="30" /></div>
		<div><a href="#award-winning" class="home-create3"> </a></div>
		<div id="text-box4"><img src="http://www.stormdfx.com/stormdfx/img/text-block4.png" alt="text" width="940" height="16" /></div>
		<div><a href="#repack-service" class="home-create4"> </a></div>
		<div id="text-box5"><img src="http://www.stormdfx.com/stormdfx/img/text-block5.png" alt="text" width="940" height="28" /></div>
		<div><a href="#drop-line" class="home-create5"> </a></div>
	<div>
	<div id="text-box6"><img src="http://www.stormdfx.com/stormdfx/img/text-block6.png" alt="text" width="146" height="47" /></div>
	<div><a href="#your-brand" class="home-create6"> </a></div>
	</div>
	<nav class="next-prev" style="margin-top:90px">
		<hr /><a class="next storm-dfx" href="#storm-dfx">Next</a>
	</nav>
	</div>

I called it "centerme" and estimated the overall height of your existing menu at being 600px to allow me to set the -300px negative offset.

Notice how I also plucked out your <nav class="next-prev"> + inner <hr> and put them inside the "storm-home" div otherwise it will go floating off into the middle of the screen. I also just added a top margin of 90px to bring it back to roundabout the same position as it previously was, but you can mess with exact pixels to suit.

If, all goes well, you'll get this: http://jemthingsandstuff.co.uk/testi...-viewport.html

Is this something you can work with?

BTW - I used to live in Alfreton (well, Riddings)

[Beverleyh]

ps - I just changed my example to

<div id="centerme" style="height:600px; position:relative; top:50%; margin-top:-320px">

instead of -300px, as I think it looks a bit more central that way.

[Beverleyh]

Just out of curiosity, did Stormdfx used to be called Lynx? - theres a picture with Lynx on in your site.

If I was, I went for an interview there about 8 years ago - ha, ha

[Richard Cousins]

Hi Beverleyh.

Thank you for the examples. Ive been holiday so today is the first chance Ive got to implement it. It looks awesome :-)

Many thanks.

We used to be called DesignFX but now we are called StormDFX. Im hoping to have the site fully complete and live by the end of the week :-)

[Beverleyh]

Good stuff. Hope it works out as planned.

[Richard Cousins]

Ive copied the cod but it doesn't seem to be centring the element :S