Question

我是html和整个网络开发过程的新手（如果这是一个愚蠢的问题，请原谅我）但是如何在页面中间放置一个表单？我有以下代码，但是当我应用它时，表单对齐中心但是粘在页面顶部 - 为什么？我可以手动调整它，但我想会有问题取决于网站后来查看的分辨率。

 #formWrapper{
    width:550px;
padding 2em 0 2em 0;                    border:solid 5px #F1F1F1;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    background-color: #AFC8DE;
}

Answer 1

#formWrapper{
    width:550px;
    padding: 2em 0 2em 0;                    
    border:solid 5px #F1F1F1;
    margin:0 auto;
    background-color: #AFC8DE;
}

垂直对齐div看这里的例子

http://stylizedweb.com/2008/02/01/vertical-align-div/

Answer 2

padding

后您缺少冒号

Answer 3

auto对于边距只有在定义了显式宽度但不适用于垂直居中的情况下才有效 - 这在CSS中实际上并不容易。最简单的方法就是这样做

#formWrapper {
    height: 400px;
    width: 550px;
    position: absolute;
    top: 50%; /*position halfway down the page */
    margin-top: -200px; /*shift item up half it's width (assuming here the height is 400px)*/
    left: 50%; /*position in center of page */
    margin-left: -275px; /*shift item left half it's width (working with your width of 550px)*/
    /*add your other values here, 
    but not anything that will conflict with the above */

}

Answer 4

填充后需要“：”！

#formWrapper{
width:550px;
padding: 2em 0 2em 0;                    
border:solid 5px #F1F1F1;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
background-color: #AFC8DE;
}

Answer 5

如果直接复制/粘贴，则需要解决一些语法错误：

padding后需要冒号，如果所有边距都设置为自动，则无需指定每个子集，只需声明margin: auto即可使用auto所有的利润。

#formWrapper
{
width: 550px;
padding: 2em 0 2em 0;                    
border: solid 5px #F1F1F1;
margin: auto;
background-color: #AFC8DE;
}

如何使用html css在中心对齐

5 个答案: