Websites for sale:
Used Cars for Sale - $175 and Car Sale.
If interested drop me a line at ken@kensfi.com. Thanks!
Have questions about Toronto? Check my latest project: Ask about Toronto!
Centering the content of a page with CSS
Centering horizontally and align vertically a DIV on the page is one of the hottest subjects of CSS developers community. I will present today the solution I am using successfully when I want the content of a page to be perfectly centered horizontally and vertically in browser.
This method is working cross browsers and I am using valid CSS. You can use this method all the time you need to center the content of a page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Centered Content</title>
<!--[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]-->
<style type="text/css">
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0
}
/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body {
text-align:left;
min-height:468px;/* for good browsers*/
min-width:552px;/* for good browsers*/
}
#outer {
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#container {
text-align: left;
position:relative;
vertical-align:middle;
display:table-cell;
height: 468px;
}
#inner {
width: 552px;
background:#fff;
height: 552px;
text-align: center;
margin-left:auto;
margin-right:auto;
border: 2px solid #0789F8;
}
p {
padding:10px;
text-align:left
}
</style>
</head>
<body>
<div id="outer">
<div id="container">
<div id="inner">
<p>This DIV will appear in the center of the page in any browser! Enlarge the browser window and then make it smaller to see how this box is staying centrally on the page. I recommend you to use this method anytime you want centering a DIV box on a page. I am using valid XHTML and CSS 2.1. Thanks for visiting my blog. Hope you find the answers you need!</p>
</div>
</div>
</div>
</body>
</html>
Here a live DEMO – Free EXIF Reader.
If you enjoyed this post, make sure you subscribe to my RSS feed!Related Posts
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Please read before commenting:
I don't tolerate spam comments. Be human and polite. If you are signing as "Computer repairing", "iPhone store" or other kind of bullshits you'll be marked as spam.
USE YOUR NAME! Thanks!
