Jump to content

Divs And Vertical Centering


makatak88
 Share

Recommended Posts

Im tearing myself away kicking and screaming from using tables and Im getting the hang of divs but I cant seem to vertically center what is my wrapper div inside the body like I used to with tables. I can use auto on the left and right margins to get horizontal centering but no go on vertical- any help would be awesomely appreciatedhtml<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><!-- TemplateBeginEditable name="doctitle" --><title>Lolo</title><!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --><link href="/css/products.css" rel="stylesheet" type="text/css" /></head><body><div id="wrapper"> <div id="header"></div> <div id="navigation"> <ul> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> <li><a href="#">Page 4</a></li> <li><a href="#">Back to Rings</a></li> </ul> </div> <div id="middle"> </div> <div id="footer">© 2010</div></div></body></html>css@charset "UTF-8";body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.8em; color: #FFFFFF; padding: 0px; background-color: #666666; text-align: center; min-width: 1000px;}#wrapper { background-color: #FFFFFF; height: 625px; width: 1000px; margin: auto; padding: 0px; position: static; text-align: left;}#wrapper #header { background-color: #000000; height: 20px; width: 1000px; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto;}#wrapper #middle { background-color: #000000; height: 450px; width: 1000px; margin-top: 100px; margin-right: auto; margin-bottom: auto; margin-left: auto;}#wrapper #footer { background-color: #000000; height: 30px; width: 1000px; margin-top: 50px; margin-right: auto; margin-bottom: auto; margin-left: auto;}#wrapper #navigation ul { margin: 0px; padding: 0px; list-style-type: none;}#wrapper #navigation ul li { display: inline; padding-right: 10px; padding-left: 10px; border-right-style: solid; border-right-width: 1px; border-right-color: #000000;}#wrapper #navigation ul li a { color: #000000; text-decoration: none;}#wrapper #navigation ul li a:visited { color: #000000; text-decoration: none;}#wrapper #navigation ul li a:hover { color: #000000; text-decoration: none; background-color: #FF0000;}

Link to comment
Share on other sites

don't feel bad, its not a feature that is readily available within CSS2. You can try this techinique, which is somewhat similar to your table idea.http://www.w3.org/Style/Examples/007/center#verticalto center block level elements, all you need to write is margin: 0 auto. You don't have to do all sides. That will set the top and bottom margins to 0, and set the left and right to automatically center themselves. All in one nice line.p.s. use a strict DTD :)

Edited by thescientist
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...