Vertical Center

**Merciless** · 02-05-2007, 04:36 AM

here i am been designing websites for a while and i cant get a stupid table to vertically align, its a 800 by 800 table for a splash page, i need it horizontally and vertically centered. why wont any of my valign or TD align things work?

what is wrong??

PS. can anybody repost the tag to make flash animations not go over stuff? was it like wmode="transparent" or something?

**codeexploiter** · 02-05-2007, 05:45 AM

1. using HTML tables

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

</style>
</head>

<body>
<table cellspacing="0" cellpadding="0" width="100%" border="1" height="100%">
<tr><td width="100%" align="center" valign="middle">
<table cellspacing="0" cellpadding="0" width="800" border="1" height="800">
<tr><td align="center">Test</td></tr>
</table>
</td></tr>
</table>
</body>
</html>

2. Instead of using a table based solution you can go for a CSS & DIV based solution, which is more efficient compared to the above one.

Have a look at this article where they explained achieving vertical centering using CSS

**jscheuer1** · 02-05-2007, 05:48 AM

Vertical centering on a page is not a simple matter. There are ways, see:

http://www.wpdfd.com/editorial/thebox/deadcentre3.html

As for your other question, just look back over your old threads, particularly:

http://www.dynamicdrive.com/forums/s...ad.php?t=16785

**Merciless** · 02-05-2007, 03:26 PM

k code, thx but i needed to figure out how to center the whole table itself not the content inside the table. and thanks for that link js, though i am having a hard time translating the second instruction, i will look into i further and come back if i have any problems.

EDIT: i will use the code to figure it out no need to spend any more time posting about it, and thank you for finding my old post js

thats just the thing i was looking for.

**Merciless** · 02-05-2007, 10:47 PM

my problem continues, my image might center. maybe, but my first concern is the fact that my table is IGNORING my fixed height that i set, not only will it not do 100%, it will not even go to the pixel amount that i set. what on earth is going on? here is the link to the web page, i would like to center that completely with like 10px of table space on each side of the picture directly in the middle of the page, nothing i do to the code seems to change anything, help pl0x,

here is the link to the page, http://www.imikya.com/betatesting/nmsplash.htm

**jscheuer1** · 02-05-2007, 11:17 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

body,td,th {
	color: #FFFFFF;
}
body {
	background-image: url(http://www.imikya.com/betatesting/bftest.jpg);
}
table {
position:absolute;
top:50%;
left:50%;
margin-left:-425px;
margin-top:-288px;
}

</style></head>

<body>
<table width="850" height="576" border="0" cellpadding="10" cellspacing="0" bgcolor="#000000">
  <tr>
    <td><div align="center"><img src="http://www.imikya.com/betatesting/splashtest.jpg" width="800" height="556"></div></td>
  </tr>
</table>
</body>
</html>

But, the image is a little large and will have portions that are unviewable at 800x600 resolution screens and browser windows that are smaller than 850x650 or there abouts.

It would be a little better if you skipped the table:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

body,td,th {
	color: #FFFFFF;
}
body {
	background-image: url(http://www.imikya.com/betatesting/bftest.jpg);
}
img {
position:absolute;
top:50%;
left:50%;
margin-left:-400px;
margin-top:-278px;
}

</style></head>

<body>
<img src="http://www.imikya.com/betatesting/splashtest.jpg" width="800" height="556">
</body>
</html>

**Merciless** · 02-05-2007, 11:18 PM

YES, BRILLIANT, thank you so much john, as usual, your the best

PS. its a high graphic gaming clan, i dont have to worry about anyone having under 1024, but i'll do it anyways, thx

**Merciless** · 02-06-2007, 05:40 AM

STUPID QUESTION ::EDIT:: problem solved, sorry, thanks john.

Thread: Vertical Center

Thread Tools

Search Thread

Vertical Center

Bookmarks

Bookmarks

Posting Permissions