Getting you stuff centered on the page with CSS.
Monday, April 20, 2009 21:35Posted in category Uncategorized
No Comments
It’s not to obvious how to get your stuff horizontally and vertically centered on an html page by using CSS.
But it’s not too hard;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Center</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> html,body { height:100%; width:100%; } body { text-align:center; min-height:70px; min-width:100px; } #outer{ height:100%; width:100%; display:table; vertical-align:middle; } #container { text-align: center; position:relative; vertical-align:middle; display:table-cell; height: 70px; } #inner { width: 100px; background:#fff; height: 70px; text-align: center; margin-left:auto; margin-right:auto; border:1px solid #000; } </style> <!--[if lte IE 8]> <style type="text/css"> #outer{display:block} #container{top:50%;display:block} #inner{top:-50%;position:relative} </style> <![endif]--> <!--[if IE 7]> <style type="text/css"> #outer{ position:relative; overflow:hidden; } </style> <![endif]--> </head> <body> <div id="outer"> <div id="container"> <div id="inner"> <!-- this is centered --> </div> </div> </div> </body> </html>
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Leave a Reply
You must be logged in to post a comment.
