-1 
#logo {
    width: 330px ;
    margin: 0 auto;
}

header h1 {
    width: 760px;
    font-weight: 33px;
    margin: 0 auto;
}

#aboutme section {
    width: 960px;
    margin: 0 auto; 
    color: #fff;
}

section h1 {
    width: 200px;
    margin: 0 auto;
}

#portfolio section {
    width: 960px;
    margin: 0 auto;
}

contact form    {
    margin:auto;
    position:relative;
    width:550px;
    height:450px;
    font-family: Tahoma, sans-serif;
    font-size: 14px;
    font-style: italic;
    line-height: 24px;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    border-radius: 10px;
    padding:10px;
    border: 1px solid #999;
    border: inset 1px solid #333;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

这是内容 www.swatdesignz.com 的网站，它目前已撤消，但我想摆脱跨浏览器的兼容性。我总是希望有人可以将我引导到跨浏览器邮件表单。

4

1 回答 1

0

您可以使用绝对定位很好地垂直和水平居中对象。唯一需要注意的是它必须具有固定的宽度和高度（除非您想使用 javascript 动态计算它们）。

.parent { position:relative; }

.item_to_be_centred { 
position:absolute;
top:50%;
height:50%;
width:100px;
height:100px;
margin:-50px 0 0 -50px;
}

诀窍在于负边距是项目宽度/高度的 50%，它欺骗浏览器认为元素锚点是死点而不是左上角。

旁注：在实时环境中发布指向正在开发中的站点的链接时要小心。您在 html 中有清晰可见的 PHP 作为注释，其中一部分是公开您的电子邮件地址。

于 2013-09-12T16:13:16.370 回答