2

我有一个包含我的表单的 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{

}

解决办法是什么？

4

5 回答 5

1

它实际上对我有用，请参阅jsFiddle。

我没有更改您的任何代码。

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

于 2012-11-29T14:45:49.400 回答
1

尝试使用类似的 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
于 2012-11-29T14:42:34.287 回答
0

除了在其他答案中使用 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% */
}

将正文文本对齐设置为中心很重要，这样它就可以在所有浏览器中使用

于 2012-11-29T14:50:09.087 回答
0

在大多数情况下，最好不要使用集中式 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>
于 2012-11-29T14:51:11.333 回答
0

修复标签的布局，布局将正常工作。所以</div>而不是< /div>例如。

看到它在这里工作：http: //jsfiddle.net/XscZK/

于 2012-11-29T14:51:15.780 回答