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

Tilted Forum Project Discussion Community (https://thetfp.com/tfp/)

- Tilted Technology (https://thetfp.com/tfp/tilted-technology/)

- - [html/css] vertical centering... (https://thetfp.com/tfp/tilted-technology/62697-html-css-vertical-centering.html)

Silvy

07-16-2004 08:43 AM

[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!

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>

All times are GMT -8. The time now is 05:10 AM.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73