Centre Aligning a Div

[Richard Cousins]

Im currently making a website for the design studio I work for and its not far from completion. The one problem I am having is centreing the links at the very top. All these links are enclosed within one main DIV so all I want to do is align this div so it sits right in the middle of the users screen. Now it seem to do this horizontally but it wont do it vertically.

Could anyone please look at the code and help point out where I am going wrong.

The sit is currently hosted here: www.stormdfx.com/stormdfx


The DIV I want to centre is called storm-home



Any help would be much appriciated.

Thanks,

Rich

[Richard Cousins]

anyone able to help me?

[Beverleyh]

I can't check from iPhone but maybe its because you've not set the left and right margins to "auto"?

See this for ref: http://www.w3schools.com/css/css_align.asp

[Richard Cousins]

Ive added margin-left and margin-right auto and it hasn't made it float in the centre. I've got top set to 50%.

Not sure what the problem is.

[Richard Cousins]

Centre aligning horizontally isnt the problem really its getting it to float in the centre vertically.

[bernie1227]

css vertical align?

[Richard Cousins]

Where do i place that in the code, im not sure?

[Richard Cousins]

I've tried it in a few locations and it doesn't seem to be working :S

[Richard Cousins]

this is the code for the part i want to centre:

<div id="content">
	<article id="storm-home">
		<div><a href="#storm-dfx" class="home-create"> </a></div>
		<div id="text-box1"><img src="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="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="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="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="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="img/text-block6.png" alt="text" width="146" height="47" /></div>
			<div><a href="#your-brand" class="home-create6"> </a></div>
		</div>

This is the CSS for the storm-home id:

#content article { width: 940px; height: 550px;}		
                #storm-home,
		#storm-dfx,
		#service,
		#finger-pulse,
		#award-winning,
		#repack-service,
		#drop-line,
		#your-brand{padding-top: 10px;}
		#storm-home {position: absolute; top: 50%; margin-left:auto; margin-right:auto;  vertical-align:text-top;}
		#storm-dfx {position: absolute; top: 1090px;}
		#service {position: absolute; top: 2180px;}
		#content h1 {margin: 0 0 25px 0; font-size: 60px; font-family: arial; font-weight: normal; line-height: 65px;}
		#finger-pulse {position: absolute; top: 3270px;}
		#award-winning {position: absolute; top: 4360px;}
		#repack-service {position: absolute; top: 5450px;}
		#drop-line {position: absolute; top: 6540px;}
		#your-brand {position: absolute; top: 7630px;}

[Richard Cousins]

OK Ive tried adding this css to a new div and then wrapping that div around the content and it doesnt work. Now if I open a statr a new html document with nothing in it it seem works. So Im guessing some cod I already have isnt allowing it to align vertically in the centre though I dont know which bit of code :-(

#div-new{
   position: absolute;
   background: #000;
   top: 50%;
   left: 0;
   width: 100%;
}