Vertical centering

07-01-2007, 1:15 PM

Hi,

I found a site that shows how to centre an object vertically on a page
using a table because CSS doesn't support this feature for some reason.

It seemed simple enough to just wrap everything in a table and then
vertical-align : middle everything. It shows it working on the tutorial
page, but having tried the same thing it fails and I don't understand
why. Would someone be kind enough take a look for me and see if they can
discover what I've done wrong?

The tutorial is here:

http://www.quirksmode.org/css/centering.html

and the site I tried to use this technique on is here:

http://www.phillowen.com

The relevant code is here:

style.css
---------

table {
width: 100%;
height: 100%;
}

td {
vertical-align: middle;
text-align: center;
}

#main {
position: relative;
background-image: url(bkg.jpg);
background-repeat: repeat-x;
margin: 0 auto;
width: 750px;
height: 500px;
text-align: left;
}

index.htm
----------

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Phil Lowen</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table>
<tr>
<td>
<div id="main">



</div>
</td>
</tr>
</table>
</body>
</html>

--
regards, James Luff Gamertag: Lufferov
remove 'nospam' to e-mail
"There are 10 types of people in the world:
Those that understand binary, and those that don't."

07-01-2007, 1:16 PM

James

I'm not sure what your problem is, your page looked good on both
browsers I use.

Jack

On Mon, 24 Jul 2006 23:30:22 +0100, James Luff
<james.luff@nospamdsl.pipex.com> wrote:

>Hi,
>
>I found a site that shows how to centre an object vertically on a page
>using a table because CSS doesn't support this feature for some reason.
>
>It seemed simple enough to just wrap everything in a table and then
>vertical-align : middle everything. It shows it working on the tutorial
>page, but having tried the same thing it fails and I don't understand
>why. Would someone be kind enough take a look for me and see if they can
>discover what I've done wrong?
>
>The tutorial is here:
>
>http://www.quirksmode.org/css/centering.html
>
>and the site I tried to use this technique on is here:
>
>http://www.phillowen.com
>
>The relevant code is here:
>

07-01-2007, 1:16 PM

Jack Forbes wrote:
> James
>
> I'm not sure what your problem is, your page looked good on both
> browsers I use.

Thanks for looking, the problem is the site should be centred
vertically, at the moment it is just centring horizontally using margin
: auto;

The page should look like this (fixed font required):
________________________________________
|Browser |
| |
| |
| __________________ |
| |Site | |
| | | |
| | | |
| | | |
| |__________________| |
| |
| |
| |
|________________________________________|

But it looks like this:
________________________________________
|Browser __________________ |
| |Site | |
| | | |
| | | |
| | | |
| |__________________| |
| |
| |
| |
| |
| |
| |
|________________________________________|

As I understood it, putting the site inside a table and then using
vertical-align : middle; should put it in the centre of the screen. This
doesn't seem to be working for me and I don't understand why when the
tutorial I linked to does work.

--
regards, James Luff Gamertag: Lufferov
remove 'nospam' to e-mail
"There are 10 types of people in the world:
Those that understand binary, and those that don't."

07-01-2007, 1:16 PM

James Luff wrote:
> Jack Forbes wrote:
>> James
>>
>> I'm not sure what your problem is, your page looked good on both
>> browsers I use.
>
> Thanks for looking, the problem is the site should be centred
> vertically, at the moment it is just centring horizontally using margin
> : auto;

I've just noticed, it looks okay at 1024 x 768 because the site fits
fairly well to that resolution. If you go higher the problem becomes
more obvious, it isn't something I'm going to lose sleep over but it's
one of those little things that's going to bug me.

--
regards, James Luff Gamertag: Lufferov
remove 'nospam' to e-mail
"There are 10 types of people in the world:
Those that understand binary, and those that don't."

07-01-2007, 1:16 PM

I understand what you are wanting, I can't help but wonder if what is
happening is the table settings are centering on the html page, not
the screen.

What if you use the "80%, 70 %" centering/size command or something
like that to Vertically align the table. It works at any screen
setting for me in the horizontal centering.

On Tue, 25 Jul 2006 23:58:39 +0100, James Luff
<james.luff@nospamdsl.pipex.com> wrote:

>Jack Forbes wrote:
>> James
>>
>> I'm not sure what your problem is, your page looked good on both
>> browsers I use.
>
>Thanks for looking, the problem is the site should be centred
>vertically, at the moment it is just centring horizontally using margin
>: auto;
>
>The page should look like this (fixed font required):
> ________________________________________
>|Browser |
>| |
>| |
>| __________________ |
>| |Site | |
>| | | |
>| | | |
>| | | |
>| |__________________| |
>| |
>| |
>| |
>|________________________________________|
>
>But it looks like this:
> ________________________________________
>|Browser __________________ |
>| |Site | |
>| | | |
>| | | |
>| | | |
>| |__________________| |
>| |
>| |
>| |
>| |
>| |
>| |
>|________________________________________|
>
>As I understood it, putting the site inside a table and then using
>vertical-align : middle; should put it in the centre of the screen. This
>doesn't seem to be working for me and I don't understand why when the
>tutorial I linked to does work.

07-01-2007, 1:16 PM

"James Luff" <james.luff@nospamdsl.pipex.com> wrote in message
news

tednbFwjK2TPlvZRVnygg@pipex.net...
> James Luff wrote:
>> Jack Forbes wrote:
>>> James
>>>
>>> I'm not sure what your problem is, your page looked good on both
>>> browsers I use.
>>
>> Thanks for looking, the problem is the site should be centred vertically,
>> at the moment it is just centring horizontally using margin : auto;

Your problem is that your content is centered and mid in the table but the
table is not the full height of the screen. Maybe doing a <table height =
"100%"> would help. Not sure if this is valid HTML though so give it a try.

>
> I've just noticed, it looks okay at 1024 x 768 because the site fits
> fairly well to that resolution. If you go higher the problem becomes more
> obvious, it isn't something I'm going to lose sleep over but it's one of
> those little things that's going to bug me.
>
> --
> regards, James Luff Gamertag: Lufferov
> remove 'nospam' to e-mail
> "There are 10 types of people in the world:
> Those that understand binary, and those that don't."

07-01-2007, 1:16 PM

Jamie Allison wrote:
>>>> I'm not sure what your problem is, your page looked good on both
>>>> browsers I use.
>>> Thanks for looking, the problem is the site should be centred vertically,
>>> at the moment it is just centring horizontally using margin : auto;
>
> Your problem is that your content is centered and mid in the table but the
> table is not the full height of the screen. Maybe doing a <table height =
> "100%"> would help. Not sure if this is valid HTML though so give it a try.

But that's what this section of code in the CSS file does:

table {
width: 100%;
height: 100%;
}

isn't it? That's how I understood it anyway.

--
regards, James Luff Gamertag: Lufferov
remove 'nospam' to e-mail
"There are 10 types of people in the world:
Those that understand binary, and those that don't."

07-01-2007, 1:16 PM

On Fri, 28 Jul 2006 00:34:25 +0100, James Luff
<james.luff@nospamdsl.pipex.com> wrote:

>Jamie Allison wrote:
>>>>> I'm not sure what your problem is, your page looked good on both
>>>>> browsers I use.
>>>> Thanks for looking, the problem is the site should be centred vertically,
>>>> at the moment it is just centring horizontally using margin : auto;
>>
>> Your problem is that your content is centered and mid in the table but the
>> table is not the full height of the screen. Maybe doing a <table height =
>> "100%"> would help. Not sure if this is valid HTML though so give it a try.
>
>But that's what this section of code in the CSS file does:
>
>table {
> width: 100%;
> height: 100%;
>}
>
>isn't it? That's how I understood it anyway.

The problem I see here is you are using the percentage for centering
ok, but it's for centering "within" the table. The table itself is
still centering within the html page, not the display. At least
that's my feeling. Sorry, I don't know how to fix it.

Jack

07-01-2007, 1:16 PM

"James Luff" <james.luff@nospamdsl.pipex.com> wrote in message
news:-5CdnfVVMLgc0FTZRVny2w@pipex.net...
> Jamie Allison wrote:
>>>>> I'm not sure what your problem is, your page looked good on both
>>>>> browsers I use.
>>>> Thanks for looking, the problem is the site should be centred
>>>> vertically, at the moment it is just centring horizontally using margin
>>>> : auto;
>>
>> Your problem is that your content is centered and mid in the table but
>> the table is not the full height of the screen. Maybe doing a <table
>> height = "100%"> would help. Not sure if this is valid HTML though so
>> give it a try.
>
> But that's what this section of code in the CSS file does:
>
> table {
> width: 100%;
> height: 100%;
> }

As i thought the height 100% does not make the table 100% the height of the
screen but 100% height of the HTML document. There is nothing else apart
form what is in the table so the table shrinks to fit its contents.

One way would be to possibly set the height in pixels suck as 768 but then
this will only work for certain screen resolutions.

Why are you wanting it centered on the screen? Maybe you could acheive a
similar thing by doing a top margin of x amount?

>
> isn't it? That's how I understood it anyway.
>
> --
> regards, James Luff Gamertag: Lufferov
> remove 'nospam' to e-mail
> "There are 10 types of people in the world:
> Those that understand binary, and those that don't."

07-01-2007, 1:16 PM

Jamie Allison wrote:
> As i thought the height 100% does not make the table 100% the height of the
> screen but 100% height of the HTML document. There is nothing else apart
> form what is in the table so the table shrinks to fit its contents.

I understand this, but how does the tutorial I linked to work?

http://www.quirksmode.org/css/centering.html

That has the content centred on the page. Why does his version work and
not mine?

> One way would be to possibly set the height in pixels suck as 768 but then
> this will only work for certain screen resolutions.

Indeed, but as you say, this only work for a certain screen resolution.

> Why are you wanting it centred on the screen? Maybe you could achieve a
> similar thing by doing a top margin of x amount?

Why? It is mainly just a design aesthetic. The idea of using a top
margin of x gives the same problem, what value of x? The value will
always be different depending on screen resolution.

I appreciate your efforts in trying to help me. Any chance you could
investigate the working example above and see if you can spot how it works?

--
regards, James Luff Gamertag: Lufferov
remove 'nospam' to e-mail
"There are 10 types of people in the world:
Those that understand binary, and those that don't."

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to include multiple frames in frameset without predefined dimensions/vertical scrollbar	Don Schneider	HTML	0	07-01-2007 12:45 PM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)