Fatal编程技术网
  • css/
  • Css 使用IE对中DIV

Css 使用IE对中DIV

css

Css 使用IE对中DIV,css,Css,我试图用“margin:auto”将DIV居中。它可以与Chrome和FF配合使用，但以下代码不能将DIV与IE居中： CSS HTML 我做错了什么 谢谢 乔尔 编辑（完整的HTML/CSS代码）： #容器{ 保证金：0自动； 宽度：950px； 高度：50px； 背景：#000； } 试试这个 #container { margin:0 auto; width:950px; height:50px; background:#000; } 这将帮助您： body {

我试图用
“margin:auto”
将DIV居中。它可以与Chrome和FF配合使用，但以下代码不能将DIV与IE居中：

CSS

HTML
我做错了什么

谢谢

乔尔

编辑（完整的HTML/CSS代码）：


#容器{
保证金：0自动；
宽度：950px；
高度：50px；
背景：#000；
}
试试这个

#container {
 margin:0 auto;
 width:950px;
 height:50px;
 background:#000;
}
这将帮助您：

body {
    text-align: center;
}

#container {
    text-align: left;
    margin:auto;
    width:950px;
    height:50px;
    background:#000;
}
您没有做错什么，IE6会：它忽略“margin:auto；”

在文档顶部插入以下内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
页边距自动定心

问题：通过左边距使div标签居中时：自动；或右边距：自动；在设置中，除非将以下内容添加到html正文的样式表中，否则在Internet explorer中此选项将不起作用：

html, body {
 text-align: center;
}
别忘了现在将其添加到您的段落和标题中，因为上面的设置现在将使这些段落和标题也居中

p {text-align: left;}
您还应在其中放置左右属性：

#container
{
  right: 0px;
  left: 0px;
  margin: 0px auto;
  width: 950px;
}
您需要引用“2astalavista”提到的doctype

否则

1.如果宽度已知，则使用定位和负边距居中

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
<style>


#container {
position: relative;
left: 50%; 
margin: 0 0 0 -475px; /* negative margin of half the width */
width:950px;
height:50px;
background:#000;
}

</style>
</head>
<body>
<div id="container"></div>
</body>
</html>


#容器{
位置：相对位置；
左：50%；
边距：0-475px；/*宽度一半的负边距*/
宽度：950px；
高度：50px；
背景：#000；
}
2.使用outercontainer和文本对齐中心将元素居中：

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
 <style>

#outerContainer{
text-align: center;
}

#container {
margin: 0 auto; 
width:950px;
height:50px;
background:#000;
}
</style>
</head>
<body>
<div id="outerContainer">
      <div id="container"></div>
</div>
</body>
</html>


#外部容器{
文本对齐：居中；
}
#容器{
保证金：0自动；
宽度：950px；
高度：50px；
背景：#000；
}
这个对我很有用：

#container {
   width: 80%; /* or the width of the object inside the container */
   margin-left: auto;
   margin-right: auto;
}
这对我来说对IE定心bug起到了作用：


名字：



姓氏：
您使用哪个版本的IE测试过此代码？我通常定义一个
width
，然后设置
margin:0 auto
，即使在IE中也能正常工作……我试着用IE9测试它！我上面使用的代码…没错，但正如Sime所说，使用边距：0自动；你只有边距：我得到同样的结果。。。我正在用完整的HTML代码编辑原始帖子。也许你可以在IE9上运行它，并告诉我它是否也与你一端的左侧对齐。
margin:0 auto
只是声明上下边距应为零像素。自动指的是水平边距，在这种情况下，水平边距将居中；一丝不苟difference@Alex小心点，如果这个改变会对IE产生影响，我不会感到惊讶。IE有很多奇怪的错误困扰着我，事实并非如此。这是因为海报很可能没有有效的doctype。虽然我知道你是从哪里来的，在我的时间处理了很多IE bug！我相信，自从IE5.5以来，这种方法就不再需要了。自动页边距一直在IE中工作。。。这只是一个确保浏览器不以怪癖模式渲染的例子。IE9？也许下次你得说你在谈论IE9。 
#container
{
  right: 0px;
  left: 0px;
  margin: 0px auto;
  width: 950px;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
<style>


#container {
position: relative;
left: 50%; 
margin: 0 0 0 -475px; /* negative margin of half the width */
width:950px;
height:50px;
background:#000;
}

</style>
</head>
<body>
<div id="container"></div>
</body>
</html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
 <style>

#outerContainer{
text-align: center;
}

#container {
margin: 0 auto; 
width:950px;
height:50px;
background:#000;
}
</style>
</head>
<body>
<div id="outerContainer">
      <div id="container"></div>
</div>
</body>
</html>

#container {
   width: 80%; /* or the width of the object inside the container */
   margin-left: auto;
   margin-right: auto;
}