Welcome to WebmasterWorld Guest from 107.22.30.186

Forum Moderators: not2easy

Message Too Old, No Replies

Centering DIV with CSS

     
9:54 am on Mar 10, 2003 (gmt 0)

New User

10+ Year Member

joined:Mar 10, 2003
posts:34
votes: 0


Hi,
I have a DIV box on a page. I want to center this box horizontally and vertically on the page using CSS how is this done?

I have tried .center {vertical-align: middle} without any luck please help!

10:08 am on Mar 10, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:June 19, 2001
posts:183
votes: 0

http://bluerobot.com/web/css/center1.html

or

http://bluerobot.com/web/css/center2.html

may help

10:23 am on Mar 10, 2003 (gmt 0)

New User

10+ Year Member

joined:Mar 10, 2003
posts:34
votes: 0


excellent thanks ive solved the horizontal alignment now what about vertical?
10:24 am on Mar 10, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


Hi Bootyslap Welcome to WW

previous 2 links are excellent for horizontal centering.

Vertical centering is a bit of a nightmare using CSS, but there is a workaround [wpdfd.com]

Suzy

10:37 am on Mar 10, 2003 (gmt 0)

New User

10+ Year Member

joined:Mar 10, 2003
posts:34
votes: 0


Wow, thankyou very much SuzyUK much appreciated!
1:37 pm on Mar 10, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


SuzyUK- Cool workaround, thanks for the link.
12:25 am on Mar 11, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 10, 2003
posts:188
votes: 0


excellent, thanks
4:46 pm on Mar 20, 2003 (gmt 0)

New User

10+ Year Member

joined:Mar 20, 2003
posts:16
votes: 0


Vertically centering DIV is realized in this way:

[in HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>vertically centering DIV</title></head>
<body>
<div>OBJECT</div>
</body>
</html>

[in CSS]
html { display:table; margin:0; padding:0; width:100%; height:100%; border-spacing:0; }
body { display:table-row; }
div { display:table-cell; padding:0; text-align:center; vertical-align:middle; }

Correctly rendered in Mozilla.
It arranges `OBJECT` in the center of top and bottom.