Background:
I've tried "EVERY" example I can find to get an element to align centrally (vertically and horizontally) in a browser window and none of them have worked the way I need them to.
Requirements:
What I need to do is to get a DIV with its width (760px) and height (420px) and to have this centered in the browser window. Im assuming that whatever the solution is to this problem that if I change the width and height of the DIV (via CSS ID) then it will be flexible enough to still stay centered in the browser window without having to change much else?
Solution:
Dear god im hoping someone here can help give me a solution, ive really reached the end of the road with this?
Many thanks in advance.
MarkPerhaps not exactly what your looking for but this centers (x&y) the content...
<body><div id="horizon"><div id="inner">TEXT HERE</div></div></body>
CSS
html,body{
margin:0;
padding:0;
background-color:#000;
}
div#horizon{
text-align:center;
position:absolute;
top:50%;
left:0;
width:100%;
}
div#inner{
text-align:left;
margin:0 0 0 -142px;
position:absolute;
top:-142px;
left:50%;
width:284px; /* 2*|div#inner{margin-left}| */
height:284px; /* 2*|div#inner{top}| */
background-color:#000;
background-image:url(prestart.jpg);
background-repeat:no-repeat;
border:0;
}
Example at <!-- m --><a class="postlink" href="http://www.vdm-trading.nl">http://www.vdm-trading.nl</a><!-- m --> ... site I'm developping...
3PinterPerhaps not exactly what your looking for but this centers (x&y) the content...
Dude..... you are my ****ing hero man!!!!
This was exactly what I was after!
Thank you, Thank you, Thank you.
I cannot begin to tell you how much this was pissing me off and you've absolutely made my upcoming weekend a much more relaxed experience.
Cheers man, much appreciated.
Mark
I've tried "EVERY" example I can find to get an element to align centrally (vertically and horizontally) in a browser window and none of them have worked the way I need them to.
Requirements:
What I need to do is to get a DIV with its width (760px) and height (420px) and to have this centered in the browser window. Im assuming that whatever the solution is to this problem that if I change the width and height of the DIV (via CSS ID) then it will be flexible enough to still stay centered in the browser window without having to change much else?
Solution:
Dear god im hoping someone here can help give me a solution, ive really reached the end of the road with this?
Many thanks in advance.
MarkPerhaps not exactly what your looking for but this centers (x&y) the content...
<body><div id="horizon"><div id="inner">TEXT HERE</div></div></body>
CSS
html,body{
margin:0;
padding:0;
background-color:#000;
}
div#horizon{
text-align:center;
position:absolute;
top:50%;
left:0;
width:100%;
}
div#inner{
text-align:left;
margin:0 0 0 -142px;
position:absolute;
top:-142px;
left:50%;
width:284px; /* 2*|div#inner{margin-left}| */
height:284px; /* 2*|div#inner{top}| */
background-color:#000;
background-image:url(prestart.jpg);
background-repeat:no-repeat;
border:0;
}
Example at <!-- m --><a class="postlink" href="http://www.vdm-trading.nl">http://www.vdm-trading.nl</a><!-- m --> ... site I'm developping...
3PinterPerhaps not exactly what your looking for but this centers (x&y) the content...
Dude..... you are my ****ing hero man!!!!
This was exactly what I was after!
Thank you, Thank you, Thank you.
I cannot begin to tell you how much this was pissing me off and you've absolutely made my upcoming weekend a much more relaxed experience.
Cheers man, much appreciated.
Mark