psypent81 Posted July 12, 2011 Share Posted July 12, 2011 Hi everyone,Hows it going? Ok, cutting to the chase..I have attached an external css document to my webpage, but I cant get the divs to center the content inside, even if I put the vertical-align tag (I specify it in my divs) but The text keeps sticking to the top..I need it to be centered vertically and horizontally, but I cant get it to work..Here's the two documents Im working with:HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>Test Site</title><style type="text/css"><!----></style><link href="website-test.css" rel="stylesheet" type="text/css" /></head><body><div align="center"> <div id="container"> <div id="container-header"> <div id="container-logo"> <div id="logo"></div> </div> <div id="container-login-navigation"> <div id="login"> login information </div> <div id="navigation"> Home | Solutions | Packages | Resellers | Clients | About | FAQ </div> </div> </div> <div id="maincontent"> Main Stuff goes Here </div> <div id="services-container-1"> </div> <div id="services-container-2"> </div> <div id="footer"> Home | Solutions | Packages | Resellers | Clients | About | FAQ </div> <div id="footer-copyright"> Copyright © 2011, All rights reserved. Privacy Policy | Terms of service </div> </div> </div></body></html> Here is the CSS document: /* CSS Document */body {background-color: #FFFFFF;margin-top: 0px;margin-bottom: 0px;text-align: center;color:#FF0000;font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 36px;}IMG.displayed{display: block;margin-left: auto;margin-right: auto}#container {width: 820px;height: 1000px;background: FFFFFF;font: Verdana, Arial, Helvetica, sans-serif;font-size: 20px;color: #CCCCCC;margin: 0px;padding: 0px;text-align: center;}#container-header {width: 800px;height: 140px;background: #0066FF;font: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;margin: 0px;padding: 0px;text-align: center;}#container-logo {width: 240px;height: 130px;background: #003366;font: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;margin: 0px;padding-top:0px;text-align: center;float: left;}#container-login-navigation {width: 510px;height: 130px;background: #0066FF;font: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;margin: 0px;padding: 0px;text-align: center;float: left;} #logo {width: 220px;height: 100px;background: #FFFFFF;font: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;margin-left: auto;margin-right: auto;margin-top: 20px;padding: inherit;text-align: center;vertical-align: middle;display: block;float: left;}#login {width: 500px;height: 65px;background: #FF0000;font: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;margin: 0px;padding: 0px;text-align: center;float: left;vertical-align: middle;}#navigation {width: 500px;height: 65px;background: #333333;font: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;margin: 0px;padding: 0px;text-align: center;float: left;} #maincontent {width: 800px;height: 315px;background: #333399;font: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;margin: 0px;padding: 0px;text-align: center;} #services-container-1 {width: 800px;height: 225px;background: #996600;font: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;margin: 0px;padding: 0px;text-align: center;} #services-01 {width: 150px;height: 210px;background: none;font: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;margin: 0px;padding: 0px;text-align: center;}#services-02 {width: 150px;height: 210px;background: none;font: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;margin: 0px;padding: 0px;text-align: center;}#services-03 {width: 150px;height: 210px;background: none;font: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;margin: 0px;padding: 0px;text-align: center;}#services-container-2 {width: 800px;height: 225px;background: #00FF00;font: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;margin: 0px;padding: 0px;text-align: center;}#services-04 {width: 425px;height: 184px;background: none;font: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;margin: 0px;padding: 0px;text-align: center;}#testimonials {width: 260px;height: 184px;background: none;font: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;margin: 0px;padding: 0px;text-align: center;} #footer {width: 800px;height: 126px;background: #CC0066;font: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;margin: 0px;padding: 0px;text-align: Left;}#footer-copyright {width: 800px;height: 20px;background: #000033;font: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;margin: 0px;padding: 0px;text-align: center;} What am I doing wrong? Should I not use an external CSS document? Here's a resource I used to try to center images and text, but I cant get it to work..http://www.w3.org/Style/Examples/007/center#textAny help would be greatly appreciated!-Psypent Link to comment Share on other sites More sharing options...
go2sesha Posted July 15, 2011 Share Posted July 15, 2011 Please add"display: table-cell;vertical-align:middle;"in#maincontent Link to comment Share on other sites More sharing options...
psypent81 Posted July 18, 2011 Author Share Posted July 18, 2011 Please add"display: table-cell;vertical-align:middle;"in#maincontentAh, thanks, this works!-psypent Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.