Question

#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内容的网站，目前尚未撤消，但我希望将浏览器兼容性排除在外。我总是希望有人能指导我使用跨浏览器的邮件表格。

Answer 1

使用绝对定位可以非常好地垂直和水平居中对象。唯一需要注意的是它必须具有固定的宽度和高度（除非你想用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作为评论，其中一部分是公开您的电子邮件地址。

如何在跨浏览器中居中以下内容

1 个答案: