[html/css] vertical centering... - Tilted Forum Project Discussion Community

Silvy · 07-16-2004, 08:43 AM

Hi,

I'd like to have a single block of text on a page, centered vertically and horizontally. (using css)

The last part is easy: text-align: center;

but the vertical centering is eluding me. Can anyone help?
So far I haven't been able to vertically center anything...

current code (index.html) :

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

        <link rel="stylesheet" type="text/css" href="test.css" />

        <title>

            CSS test

        </title>



    </head>

    <body>

        <div class="centerthis">

            Centered text

        </div>

    </body>

</html>

css:

PHP Code:


			
body {

    min-height:    100%;

    min-width:    100%;

    vertical-align: middle;

    }





.centerthis {

    text-align:    center;

    width:    100%;

    height:    100%;

    vertical-align:    middle;

    font-weight:    bold;

    }

The text is displayed bold and horizontally centered so the CSS is included and parsed correctly.
Any tips (on this and CSS general) greatly appreciated!

SinisterMotives · 07-16-2004, 08:59 AM

What browser are you using? The vertical-align property generally works in Internet Explorer but not in Mozilla, as near as I can tell.

If all else fails, you could use a JavaScript to move the DIV to the center of the page:

PHP Code:


			
<html>

 <head>

  <script type="text/javascript">

   function centerText() {

    document.getElementById('centeredText').style.left = (document.body.clientWidth / 2) - (parseInt(document.getElementById('centeredText').style.width) / 2) + "px";

    document.getElementById('centeredText').style.top = (document.body.clientHeight / 2) - (parseInt(document.getElementById('centeredText').style.height) / 2) + "px";

   }

  </script>

 </head>

 <body onload="centerText()">

  <div id="centeredText" style="width: 400px; height: 300px;">Centered Text</div>

 </body>

</html>

You'll need to adjust the width and height of the DIV to match the dimensions of the text as closely as possible to get it perfectly centered.

[Chandler]Could the posting textarea be any smaller on this site?[/Chandler]

noodles · 07-16-2004, 09:06 AM

relavent link

Silvy · 07-16-2004, 01:54 PM

I've tried my code with IE6 and Opera 7.5

I'll try to use both your info and see what I can come up with...

Rawb · 07-19-2004, 09:32 AM

I always put it in a table, and have the top row have a height of 40%.

Works good, mostly, even on old browsers.

Silvy · 07-19-2004, 09:38 AM

Quote:

Originally posted by aoeuhtns
I always put it in a table, and have the top row have a height of 40%.

Works good, mostly, even on old browsers.

I was on this track as well (only I use CSS and set the 'margin' to 40%), but figured there must be some *correct* way of getting true centering... Especially since I want to use it with contents of unknown sizes (at time of design).

With pictures I can use vertical-align and no matter what size the picture is (useful when displaying a random image each time) it will always be centered. No such luck with other objects, I can't get them centered.
I've not looked at it for two days, perhaps tomorrow I'll try again.

noodles · 07-19-2004, 12:18 PM

well,
i came up with a quick solution that works in ie but not in opera, didn't try mozilla. don't have the time right now to play around with it, have to go do somefin. might play with it later.

PHP Code:


			
<html>

<head>



<style type="text/css">



div {min-height:50px; !important;float:none; text-align: center;}

span{position:relative;top:50%;margin-top:-0.5em;}



</style>



</head>



<body>

<div class="text">

<span>Some Text</span>

</div>



</body>

</html>

soopafreek · 07-19-2004, 09:02 PM

try removing your doctype.

the easiest way i've found to do a fully centered block or image is to use the table within a table trick.

set the outer table's width AND height to 100%. setup one table row and one table cell. set the valign for that cell to middle and align to center.

inside that table cell, setup the inner table for your content.

keep in mind, this is a hackjob way of doing it so if you are concerned about validating your html, it won't fully validate. (height definition for table is not CSS compliant.... or something like that). you also need to remove your doctype or set it to loose or transitional.

here's an example:
http://www.disivion.com/songs/listing.html

ibis · 07-19-2004, 11:59 PM

Try these:

http://bluerobot.com/web/css/center1.html
http://bluerobot.com/web/css/center2.html

Silvy · 07-20-2004, 01:37 AM

Quote:

Originally posted by ibis
Try these:

http://bluerobot.com/web/css/center1.html
http://bluerobot.com/web/css/center2.html

Thanx for the tip, there is an interesting IE hack there, but neither of those pages handle vertical centering.

I could use one of the tricks, also mentioned in an earlier post to put the element at 50%, and then set the margin negative to half the size of the content (i.e. -200px for an element that is 400px high), but that would require fore-knowledge of the content size, something that is not necessary for say: "text-align: center".

SinisterMotives · 07-25-2004, 09:24 AM

I just thought of something else. The vertical-align property aligns the content of an element, not the element itself. To center a DIV on a page, try applying text-align and vertical-align to the BODY, not the DIV.

sailor · 07-25-2004, 09:39 AM

There isnt any good way of doing it. It annoys me, too. The only one I know of is, like others said, the table hack

jaypc2 · 07-25-2004, 03:00 PM

try this, its always worked for me.

try placing your content in a table and in the <td> tags add a valign varible and then set the class as centered text or what ever you had it on your style sheet as. so it looks like this

<td valign="middle" class="centeredtext"> that should do it..

thats just my 2 cents

ibis · 07-25-2004, 09:32 PM

Quote:

Originally posted by Silvy
Thanx for the tip, there is an interesting IE hack there, but neither of those pages handle vertical centering.

I could use one of the tricks, also mentioned in an earlier post to put the element at 50%, and then set the margin negative to half the size of the content (i.e. -200px for an element that is 400px high), but that would require fore-knowledge of the content size, something that is not necessary for say: "text-align: center".

Sorry man, I mixed up horizontal and verticle.

From what I know, there's currently no way to do this except with javascript.

SinisterMotives · 08-03-2004, 12:28 PM

I just did a new site and found that vertical-align simply doesn't work in Mozilla period. That's a curious oversight in a browser that prides itself on having a complete CSS implementation.

noodles · 08-03-2004, 07:29 PM

well... no thats not true...
(i'm back and now i have an answer)
here try this, which works perfectly for me in both ie and mozilla:

PHP Code:


			
<html>

   <head>

      <style type="text/css">

         html, body   { background-color: red; height: 100%; margin: 0; padding: 0;

                        color: white; text-align: center; }

         div#centered { border: 0; background-color: white; height: 50%; width: 50%;

                        position: absolute; left: 25%; top: 25%; color: black; }

      </style>

   </head>

   <body>

      <div id="centered">

         vertically centered div

      </div>

   </body>

</html>

07-16-2004, 08:43 AM	#1 (permalink)
Silvy paranoid Location: The Netherlands	[html/css] vertical centering... Hi, I'd like to have a single block of text on a page, centered vertically and horizontally. (using css) The last part is easy: text-align: center; but the vertical centering is eluding me. Can anyone help? So far I haven't been able to vertically center anything... current code (index.html) : PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" type="text/css" href="test.css" /> <title> CSS test </title> </head> <body> <div class="centerthis"> Centered text </div> </body> </html> css: PHP Code: `body { min-height: 100%; min-width: 100%; vertical-align: middle; } .centerthis { text-align: center; width: 100%; height: 100%; vertical-align: middle; font-weight: bold; }` The text is displayed bold and horizontally centered so the CSS is included and parsed correctly. Any tips (on this and CSS general) greatly appreciated! __________________ "Do not kill. Do not rape. Do not steal. These are principles which every man of every faith can embrace. " - Murphy MacManus (Boondock Saints)

07-16-2004, 08:59 AM	#2 (permalink)
SinisterMotives Junkie	What browser are you using? The vertical-align property generally works in Internet Explorer but not in Mozilla, as near as I can tell. If all else fails, you could use a JavaScript to move the DIV to the center of the page: PHP Code: <html> <head> <script type="text/javascript"> function centerText() { document.getElementById('centeredText').style.left = (document.body.clientWidth / 2) - (parseInt(document.getElementById('centeredText').style.width) / 2) + "px"; document.getElementById('centeredText').style.top = (document.body.clientHeight / 2) - (parseInt(document.getElementById('centeredText').style.height) / 2) + "px"; } </script> </head> <body onload="centerText()"> <div id="centeredText" style="width: 400px; height: 300px;">Centered Text</div> </body> </html> You'll need to adjust the width and height of the DIV to match the dimensions of the text as closely as possible to get it perfectly centered. [Chandler]Could the posting textarea be any smaller on this site?[/Chandler]

07-16-2004, 09:06 AM	#3 (permalink)
noodles Psycho Location: sc	relavent link __________________ This is what is hardest: to close the open hand because one loves. Nietzsche

07-16-2004, 01:54 PM	#4 (permalink)
Silvy paranoid Location: The Netherlands	I've tried my code with IE6 and Opera 7.5 I'll try to use both your info and see what I can come up with... __________________ "Do not kill. Do not rape. Do not steal. These are principles which every man of every faith can embrace. " - Murphy MacManus (Boondock Saints)

07-19-2004, 12:18 PM	#7 (permalink)
noodles Psycho Location: sc	well, i came up with a quick solution that works in ie but not in opera, didn't try mozilla. don't have the time right now to play around with it, have to go do somefin. might play with it later. PHP Code: `<html> <head> <style type="text/css"> div {min-height:50px; !important;float:none; text-align: center;} span{position:relative;top:50%;margin-top:-0.5em;} </style> </head> <body> <div class="text"> <span>Some Text</span> </div> </body> </html>`

07-19-2004, 09:32 AM	#5 (permalink)
Rawb Crazy Location: Salt Town, UT	I always put it in a table, and have the top row have a height of 40%. Works good, mostly, even on old browsers.

07-19-2004, 09:02 PM	#8 (permalink)
soopafreek Psycho Location: ask your mom	try removing your doctype. the easiest way i've found to do a fully centered block or image is to use the table within a table trick. set the outer table's width AND height to 100%. setup one table row and one table cell. set the valign for that cell to middle and align to center. inside that table cell, setup the inner table for your content. keep in mind, this is a hackjob way of doing it so if you are concerned about validating your html, it won't fully validate. (height definition for table is not CSS compliant.... or something like that). you also need to remove your doctype or set it to loose or transitional. here's an example: http://www.disivion.com/songs/listing.html __________________ aaarrrrrgggghhhh!!!!

07-19-2004, 11:59 PM	#9 (permalink)
ibis PIKE!	Try these: http://bluerobot.com/web/css/center1.html http://bluerobot.com/web/css/center2.html

07-25-2004, 09:24 AM	#11 (permalink)
SinisterMotives Junkie	I just thought of something else. The vertical-align property aligns the content of an element, not the element itself. To center a DIV on a page, try applying text-align and vertical-align to the BODY, not the DIV.

07-25-2004, 09:39 AM	#12 (permalink)
sailor beauty in the breakdown Location: Chapel Hill, NC	There isnt any good way of doing it. It annoys me, too. The only one I know of is, like others said, the table hack __________________ "Good people do not need laws to tell them to act responsibly, while bad people will find a way around the laws." --Plato

07-25-2004, 03:00 PM	#13 (permalink)
jaypc2 Tilted Location: south east	try this, its always worked for me. try placing your content in a table and in the <td> tags add a valign varible and then set the class as centered text or what ever you had it on your style sheet as. so it looks like this <td valign="middle" class="centeredtext"> that should do it.. thats just my 2 cents __________________ Zero Cool stay sexy

08-03-2004, 12:28 PM	#15 (permalink)
SinisterMotives Junkie	I just did a new site and found that vertical-align simply doesn't work in Mozilla period. That's a curious oversight in a browser that prides itself on having a complete CSS implementation.

08-03-2004, 07:29 PM	#16 (permalink)
noodles Psycho Location: sc	well... no thats not true... (i'm back and now i have an answer) here try this, which works perfectly for me in both ie and mozilla: PHP Code: <html> <head> <style type="text/css"> html, body { background-color: red; height: 100%; margin: 0; padding: 0; color: white; text-align: center; } div#centered { border: 0; background-color: white; height: 50%; width: 50%; position: absolute; left: 25%; top: 25%; color: black; } </style> </head> <body> <div id="centered"> vertically centered div </div> </body> </html> __________________ This is what is hardest: to close the open hand because one loves. Nietzsche