Practical solution to center vertically and horizontally in HTML that works in FF, IE6 and IE7
What can be a practical solution to center vertically and horizontally content in HTML that works in Firefox, IE6 and IE7?
Some details:
I am looking for solution for the entire page.
You need to specify only width of the element to be centered. Height of the element is not known in design time.
When minimizing window, scrolling should appear only when all white space is gone. In other words, width of screen should be represented as:
"leftSpace width=(screenWidth-widthOfCenteredElement)/2"+
"centeredElement width=widthOfCenteredElement"+
"rightSpace width=(screenWidth-widthOfCenteredElement)/2"
And the same for the height:
"topSpace height=(screenHeight-heightOfCenteredElement)/2"+
"centeredElement height=heightOfCenteredElement"+
"bottomSpace height=(screenWidth-heightOfCenteredElement)/2"
从http://www.webmonkey.com/codelibrary/Center_a_DIV
#horizon
{
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
display: block
}
#content
{
width: 250px;
height: 70px;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
visibility: visible
}
<div id="horizon">
<div id="content">
<p>This text is<br><emphasis>DEAD CENTRE</emphasis ><br>and stays there!</p>
</div><!-- closes content-->
</div><!-- closes horizon-->
<!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>Centering</title>
<style type="text/css" media="screen">
body, html {height: 100%; padding: 0px; margin: 0px;}
#outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
#middle {vertical-align: middle}
#centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
</style>
</head>
<body>
<table id="outer" cellpadding="0" cellspacing="0">
<tr><td id="middle">
<div id="centered" style="border: 1px solid green;">
Centered content
</div>
</td></tr>
</table>
</body>
</html>
Solution from community.contractwebdevelopment.com also is a good one. And if you know height of your content that needs to be centered seems to be better.
For horizontal:
<style>
body
{
text-align:left;
}
.MainBlockElement
{
text-align:center;
margin: 0 auto;
}
</style>
You need the text-align:left in the body to fix a bug with IE's rendering.
链接地址: http://www.djcxy.com/p/75708.html上一篇: 如何将SVG放在div中？