Question

我有一个包含我的表格的div（作为蓝框）。我需要在屏幕上为每个浏览器设置div。我搜索了这个，人们说如果我把保证金作为auto它应该有效。

但不，这会把我的盒子（div）放在每个浏览器的左侧。

<HTML>
..
...
<body>

<div id="questionare">

<form .....
....
....
</form>
         </div>

</body>

...
....

</HTML>

在我的CSS上我尝试过以下内容：

#questionare{

 margin: 0 auto ;
 position:relative;
 width: 300px; 
 text-align: left;
 background:rgb(127, 177, 198);
 padding: 88px 79px 29px; 
 border-radius: 10px;
 box-shadow: 0px 5px 12px rgba(0,0,0,0.4); 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; -khtml-border-radius: 10px; 
-webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, .4); 
-moz-box-shadow: 0 5px 12px rgba(0, 0, 0, .4); 
-khtml-box-shadow: 0 5px 12px rgba(0, 0, 0, .4);
 behavior: url(/PIE.htc);
}

- 或 -

#questionare{
 margin-left: auto ;
 margin-right: auto ;
 position:relative;
width: 300px;

text-align: left;
background:rgb(127, 177, 198);
padding: 88px 79px 29px; 
border-radius: 10px;
box-shadow: 0px 5px 12px rgba(0,0,0,0.4); 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; -khtml-border-radius: 10px; 
-webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, .4); 
-moz-box-shadow: 0 5px 12px rgba(0, 0, 0, .4); 
-khtml-box-shadow: 0 5px 12px rgba(0, 0, 0, .4);

behavior: url(/PIE.htc);


}

表单样式为空

form{

}

解决方案是什么？

Answer 1

尝试使用像

这样的DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Answer 2

它实际上适合我，请参阅jsFiddle。

我没有更改任何代码。

您的问题可能是您错过了doctype，迫使浏览器以怪癖模式呈现。

Answer 3

除了使用其他答案所建议的Doctype外，你需要有这个css规则：

body{text-align: center;}
.wrapper{
text-align: left;
margin: 0 auto;
width: 100px; /* or your desired size, or no size if you want the div to be 100% */
height: 100px; /* or your desired size, or no size if you want the div to be 100% */
}

将正文文本对齐设置为居中非常重要，这样才能在所有浏览器中使用

Answer 4

在大多数情况下，最好不要使用集中式div来设置其内容的样式，而是这样做。

#questionaire{
position:realative;
margin:auto;
width:300px;
}
#questionaire_innner_div{
position:relative;
float:left;
padding: 88px 79px 29px; 
width:242px;
}

那么你的html应该是这样的。

<div id="questionaire">
<div id="questionaire_innner_div">

<form>
...
...
...
</form>

</div>
</div>

Answer 5

修复标记的布局，布局将按预期工作。因此，</div>而不是< /div>。

在此处查看：http://jsfiddle.net/XscZK/

在每个浏览器中将屏幕居中显示div

5 个答案: