Vertically And Horizonatally center main wrap div [duplicate]
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to center DIV in DIV?
Now i try
<html>
<head>
<title>?????????????????</title>
<style type="text/css">
body
{
margin-left: auto;
margin-right:auto;
}
#wrap
{
background: black;
margin-left: auto;
margin-right:auto;
height:450px;
width:450px;
position:absolute;
top:50%;
right:50%;
left:50开发者_StackOverflow社区%;
margin-top:-225px;
}
</style>
</head>
<body>
<div id="wrap">
Hello
</div>
</body>
</html>
?????
vertical-align does not work the way most beginners expect it to work.
Here is one tutorial explaining the situation. It sounds like you want Method 1.
Try this:
<html>
<head>
<title>?????????????????</title>
<style type="text/css">
#content
{
background: black;
margin: -225px;
height: 450px;
width: 450px;
}
#wrap
{
height: 0px;
width: 0px;
position:absolute;
top:50%;
left:50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
Hello
</div>
</div>
</body>
</html>
<html>
<head>
<title>?????????????????</title>
<style type="text/css">
.ui-container
{
background: red;
}
.ui-wrapper
{
margin: auto;
background: black;
height:450px;
width:450px;
color: red;
}
</style>
</head>
<body>
<div class="ui-container">
<div class="ui-wrapper">
<p>Hello</p>
</div>
</div>
</body>
</html>
This tutorial covers a method that has worked well for me in the past.
People may hate me for suggesting this, but place it within a TD, where vertical-aligning is still doable without inflicting any harm on yourself.
I've provided a working examples here: http://jsbin.com/ezolu3/edit
The markup follows:
<table id="vCent">
<tbody>
<tr>
<td valign="center">
<div id="foo">
<p>Using tables incorrectly is wrong, without question. But sometimes there are other things that are more wrong - "wrongerer," if you will. Causing yourself unnecessary frustration trying to get an element to center itself vertically, for example, is one of those <em>wrongerer</em> things. Don't bother, just go with what works.</p>
</div>
</td>
</tr>
</tbody>
</table>
加载中,请稍侯......
精彩评论