center aligned div isnt actually center
okay i have a div nested inside another div and the inner div is centered with 80% width. but its not fully centered.
how would i make it fully centered?
http://jsfiddle.net/xx8hx/
http://postimage.org/image/15linq5yc/
html
<div class="wrap">
<div class="content">
<h1>Contact</h1>
<form action="/cgi-bin/cgiemail" method="post">
<table width="50%" border="0" cellpadding="5" align="center">
<tr>
<td align="left" width="50%">First Name</td>
<td><input name="FirstName" type="text" id="fname" size="25" /></td>
</tr>
</table>
</form>
</div>
</div>
css
.wrap {
overflow:hidden;
width:100%;
height:100%;
posi开发者_如何学运维tion:absolute;
}
.content {
width:80%;
margin:20px auto;
padding:15px;
background:url(../images/contentback.png);
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}
This padding line in your css is causing the box to be off-centered.
/* stop do not edit */
#contact>div {
padding:50px 20px;
}
Getting rid of the left/right margin on that line (even though the comment told me not to) fixed it for me.
http://jsfiddle.net/4AX5b/
Add to your CSS:
body,
html {
padding: 0;
margin: 0;
}
Demo fiddle.
found it:
/* stop do not edit */
#contact>div {
pading: 50px 20px;
}
causes the error it should be:
#contact > div {
padding: 50px 0;
}
精彩评论