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 03:05 PM.

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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360