ChrisMartino Posted January 9, 2010 Share Posted January 9, 2010 Hey i've looked around for a CSS div that would center something to the middle of the page?, But i cant find it this is were the div would go: <div id="maincontent"> <div class="innertube"> // DIV WOULD GO HERE<<<<<< </div> </div> And heres my style.css : body{ margin: 0; padding: 0; border: 0; overflow: hidden; height: 100%; max-height: 100%; } #framecontent{ position: absolute; bottom: 0; left: 0; width: 100%; height: 70px; /*Height of frame div*/ overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ background: #464646; color: white; } #maincontent{ position: fixed; top: 0; left: 0; right: 0; bottom: 60px; /*Set bottom value to HeightOfFrameDiv*/ overflow: auto; background: #000000; } .innertube{ margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/ } * html body{ /*IE6 hack*/ padding: 0 0 60px 0; /*Set value to (0 0 HeightOfFrameDiv 0)*/ } * html #maincontent{ /*IE6 hack*/ height: 100%; width: 100%; } Quote Link to comment Share on other sites More sharing options...
chaiwei Posted January 9, 2010 Share Posted January 9, 2010 <div id="maincontent"> <div class="innertube"> <div style="width:50px;margin:0 auto;background-color:red;">This is center div</div> </div> </div> The trick is use margin:0 auto; Quote Link to comment Share on other sites More sharing options...
ChrisMartino Posted January 9, 2010 Author Share Posted January 9, 2010 Didn't work D: Quote Link to comment Share on other sites More sharing options...
darken15 Posted January 9, 2010 Share Posted January 9, 2010 <div id="maincontent"> <div class="innertube" style="text-align: center;"> <div style="width:50px;margin:0 auto;background-color:red; text-align: left;">This is center div</div> </div> </div> adding text align: center would center the div in Internet Explorer. Quote Link to comment Share on other sites More sharing options...
haku Posted January 9, 2010 Share Posted January 9, 2010 If you are speaking of vertically centering the div, you can only do it without javascript if the div has a fixed height. Does the div have a fixed height? If not, you will need a javascript solution. Quote Link to comment Share on other sites More sharing options...
soycharliente Posted January 11, 2010 Share Posted January 11, 2010 <html> <body> <p>NOT CENTERED</p> <div style="margin:0 auto;width:200px;text-align:center;"> <p>CENTERED</p> </div> </body> </html> See attached image for outcome. Vertical-alignment within a div can be achieved with line-height. [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.