HTML Forum

**purk** · 09-22-2007, 01:30 PM

i have a page with just a small amount of content (tho' unknown size as content is dynamically produced) and i want the content to be centered both vertically and horizontally.

is there a way to just set the valign=middle and align=center for the body tag itself.

fyi, i'm on FF for Mac.

cheers folks

;purk

**coolkbk585** · 09-22-2007, 02:12 PM

I think that the easiest way to do that would be to put this in the style sheet:

Code:

body {
text-align: center;
}

**Silent77** · 11:02 PM

HTML Code:

<body style="text-align:center">
    <div style="text-align:left">
        <!-- Content -->
    </div>
</body>

**LadynRed** · 09-23-2007, 11:25 AM

There is currently no easy way to vertically center using html or css alone. Valign is for tables - period. Vertical-align pertains only to the baseline of text.

You might be get some results using percentages on top and bottom margins on the element to be centered.

Horizontal centering is easy, but text-align:center on the body is only part of the solution - for IE. UPut a width on they div, then use margin: 0 auto; to center in other standards-compliant browsers.

**coolkbk585** · 09-23-2007, 12:11 PM

There's a pretty easy way with CSS to make something be in the middle of the page. I've done it before. It's pretty nice.

If you want to know how, tell me.

**joder** · 09-23-2007, 12:15 PM

Quote:

Originally Posted by coolkbk585

There's a pretty easy way with CSS to make something be in the middle of the page. I've done it before. It's pretty nice.

If you want to know how, tell me.

I thought that was the point of this thread

**coolkbk585** · 09-23-2007, 12:26 PM

Quote:

Originally Posted by joder

I thought that was the point of this thread

o_O Fine.

Well, what you would do would be with CSS.

You would put your page into a div. Then you would choose how high and wide you want your page to be. Then you would fill in the margins. It's half of the heights and widths. Don't forget to leave the "-" sign there.

HTML Code:

<style type="text/css">
div#container {
height: HEIGHT px;
width: WIDTH px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -HALF OF THE HEIGHT px;
margin-left: -HALF OF THE WIDTH px;
}
</style>

**joder** · 04:07 PM

Thanks Kyle! This is going in my folder with CSS code snippets

EDIT: I've given out too much TP in the last 24 hours. When I get the chance, since your at 99, you'll get another green dot.

**chrishirst** · 09-23-2007, 06:17 PM

Here's something I did a long time ago now;

http://www.candsdesign.co.uk/page-te...tre/layout.asp

the code is at;
http://www.candsdesign.co.uk/page-te.../show-code.asp

**purk** · 09-23-2007, 08:02 PM

thanks coolkbk585 that worked perfectly.

**ChipJohns** · 09-24-2007, 07:45 PM

Quote:

Originally Posted by coolkbk585

o_O Fine.

Well, what you would do would be with CSS.

You would put your page into a div. Then you would choose how high and wide you want your page to be. Then you would fill in the margins. It's half of the heights and widths. Don't forget to leave the "-" sign there.

HTML Code:

<style type="text/css">
div#container {
height: HEIGHT px;
width: WIDTH px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -HALF OF THE HEIGHT px;
margin-left: -HALF OF THE WIDTH px;
}
</style>

I am just a little confused about this!?

Your page is going to have different sizes which will vary according to the personal settings of each visitor...

**coolkbk585** · 09-24-2007, 08:07 PM

No it won't. There are no percents there...it might look bigger because of a lower resolution...but that's it.

**ChipJohns** · 09-24-2007, 08:33 PM

Tried it out!
It does work great!
Good job dude!

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!