makatak88 Posted March 8, 2010 Share Posted March 8, 2010 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 More sharing options...
thescientist Posted March 8, 2010 Share Posted March 8, 2010 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.