-2

我刚开始css教程，所以我对css不太了解。我在这里发布css代码。你能告诉我如何在浏览器中制作整个内容中心吗？我还包括输出的屏幕截图......

在此处输入图像描述

body {
background:#E9E9E9;


}

#formWrap {
width:720px;
margin-top:30px;
margin-left:30px;
margin-right:30px;
background:#FFF;

border:1px solid #F1F1F1;
-moz-border-radius:20px;
-moz-box-shadow:2px 2px 5px #999;
-webkit-border-radius:20px;
-webkit-box-shadow:2px 2px 5px #999;
padding:16px 10px 40px;
}

#formWrap #form {
border-top: 1px solid #EEE;
width: auto;
}
#formWrap #form .row {
border-bottom: 1px dotted #EEE;
display: block;
line-height: 38px;
overflow: auto;
padding: 24px 0px;
width: 100%;
}
#formWrap #form .row .label {
font-size: 16px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
width: 180px;
padding-right: 10px;
margin-right: 10px;
}
#formWrap #form .row .input {
float: left;
margin-right: 10px;
font-style: italic;
width: auto;
}

.detail{
width: 260px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding: 7px 8px;
margin: 0;
}

.mess {
width: 450px;
height: 250px;
max-width: 450px;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding: 7px 8px;
line-height: 1em;
margin: 0;
}

#formWrap #form .row .context {
color: #999;
font-size: 11px;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
width: 200px;
float: left;
}


#formWrap #form .submit {
font-family: Arial, Helvetica, sans-serif;
margin-top: 25px;

color: #000;
font-size: 16px;
text-shadow: 1px 1px 1px #999;

}
4

2 回答 2

1

考虑到这#formwrap是主要容器（白色和最外层），只需执行 -

#formwrap{
    margin:0 auto;
}
于 2013-07-21T14:54:22.810 回答
1

您可以在要居中的元素上使用此行：

#formWrap {
    margin: 0 auto;
}

它的作用是将元素的顶部和底部尺寸设置为 0，并且左右边距将是 flaxable。以上就像在做

#formWrap {
   margin: 0 auto 0 auto;
}

参数为：右上左下。因此，如果您如上图所示设置顶部和右侧值，浏览器会将这些值赋予底部和左侧边距。如果您只设置一个值，例如：

#formWrap {
   margin: 0;
}

然后所有四个方面都将获得该值。

但回到你的问题......你还必须确保包装你想要居中的元素的元素是你想要居中的整个宽度。如果不是，它不会做任何事情。因为它将以它的父元素为中心，而不是例如屏幕的 with。

于 2013-07-21T15:07:58.803 回答