homepage Welcome to WebmasterWorld Guest from 54.211.68.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Centering DIV with CSS
BootySlap

10+ Year Member



 
Msg#: 716 posted 9:54 am on Mar 10, 2003 (gmt 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!

 

highman

10+ Year Member



 
Msg#: 716 posted 10:08 am on Mar 10, 2003 (gmt 0)
http://bluerobot.com/web/css/center1.html

or

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

may help

BootySlap

10+ Year Member



 
Msg#: 716 posted 10:23 am on Mar 10, 2003 (gmt 0)

excellent thanks ive solved the horizontal alignment now what about vertical?

SuzyUK

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



 
Msg#: 716 posted 10:24 am on Mar 10, 2003 (gmt 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

BootySlap

10+ Year Member



 
Msg#: 716 posted 10:37 am on Mar 10, 2003 (gmt 0)

Wow, thankyou very much SuzyUK much appreciated!

madcat

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 716 posted 1:37 pm on Mar 10, 2003 (gmt 0)

SuzyUK- Cool workaround, thanks for the link.

ricfink

10+ Year Member



 
Msg#: 716 posted 12:25 am on Mar 11, 2003 (gmt 0)

excellent, thanks

securecat

10+ Year Member



 
Msg#: 716 posted 4:46 pm on Mar 20, 2003 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved