1. 首页
  2. 问答
  3. 围绕主DIV

围绕主DIV

2010-11-05 128 views
0

我有一个div和里面是其他divs.My DIV是：<div id="Table_01"></div>围绕主DIV

哪能中心，它使所有其他的div居中？

来源

2010-11-05 Gandalf

回答

3 
margin-left: auto; 
margin-right: auto;

并且确保它没有100％的width值。

- 编辑： 由于您使用的是position: absolute;用（在这种情况下900px）已知宽度，你可以这样做：

left: 50%; 
margin-left: -450px;

其中-450px是宽度的一半，否定的。

来源

2010-11-05 14:35:11

+0

我试过了也不要work.Here是我的CSS： – Gandalf 2010-11-05 14:37:00

+0

＃Table_01 { \t的位置是：绝对的; \t left：0px; \t top：0px; \t width：900px; \t height：600px; } – Gandalf 2010-11-05 14:37:28

+0

如果你正在做一个具有已知宽度的“绝对位置”，你可以像“left：50％; margin-left：-450px;' – 2010-11-05 14:42:37

0

inner_div { margin:0 auto; }

要垂直居中：

inner_div { position:absolute; top:50%; margin-top:-300px; }

来源

2010-11-05 14:37:23

+0

不要工作。 – Gandalf 2010-11-05 14:42:34

+0

你把这个设置为内部div吗？ – 2010-11-05 14:44:07

+0

刚发布我的CSS。 – Gandalf 2010-11-05 14:48:58

0

这里是我的CSS：

#Table_01 { 
    position:absolute; 
    left:0px; 
    top:0px; 
    width:900px; 
    height:600px; 
} 

#index-01 { 
    position:absolute; 
    background-color:#003366; 
    left:0px; 
    top:0px; 
    width:900px; 
    height:30px; 
} 

#index-02 { 
    position:absolute; 
    left:0px; 
    top:30px; 
    width:900px; 
    height:72px; 
} 

#index-03 { 
    position:absolute; 
    left:0px; 
    top:102px; 
    width:900px; 
    height:27px; 
} 

#index-04 { 
    position:absolute; 
    left:0px; 
    top:129px; 
    width:223px; 
    height:223px; 
} 

#index-05 { 
    position:absolute; 
    left:223px; 
    top:129px; 
    width:382px; 
    height:174px; 
} 

#index-06 { 
    position:absolute; 
    left:605px; 
    top:129px; 
    width:295px; 
    height:223px; 
} 

#index-07 { 
    position:absolute; 
    left:223px; 
    top:303px; 
    width:382px; 
    height:49px; 
} 

#index-08 { 
    position:absolute; 
    left:0px; 
    top:352px; 
    width:475px; 
    height:183px; 
} 

#index-09 { 
    position:absolute; 
    left:475px; 
    top:352px; 
    width:425px; 
    height:183px; 
} 

#index-10 { 
    position:absolute; 
    left:0px; 
    top:535px; 
    width:900px; 
    height:34px; 
} 

#index-11 { 
    position:absolute; 
    background-color:#003366; 
    left:0px; 
    top:569px; 
    width:900px; 
    height:31px; 
}

我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<link rel="stylesheet" type="text/css" href="http://localhost/assets/css/td.css" /> 
<title>Training Day</title> 

<body style="margin: 0px; background-color: rgb(255, 255, 255);"> 
<div id="Table_01"> 
<div id="index-01"> &nbsp; &nbsp;$today is<br> 
</div> 
<div id="index-02"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; $logo and 
$searchbox<br> 
</div> 
<div id="index-03"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp;Navigation<br> 
</div> 
<div id="index-04"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp;Box 1<br> 
</div> 
<div id="index-05"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
Front page picture holder<br> 
</div> 
<div id="index-06"> &nbsp; &nbsp; &nbsp; Trending Topics<br> 
</div> 
<div id="index-07"> &nbsp; &nbsp; Heading author and location</div> 
<div id="index-08"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Tabs<br> 
</div> 
<div id="index-09"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; Twitter Live Feeds<br> 
</div> 
<div id="index-10"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; Stats bar<br> 
</div> 
<div id="index-11"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Footer<br> 
</div> 
</div> 
<!-- End Save for Web Slices --> 
</body> 
</html>

来源

2010-11-05 14:47:46 Gandalf

0

应该工作：

Table_01 {

position:absolute; 
margin-left:-300px; 
left:50%; 
width:900px; 
height:600px;

}

来源

2010-11-05 14:51:15

+0

-450px工作，谢谢。 – Gandalf 2010-11-05 14:54:21

+0

是的，你是对的:) – 2010-11-05 14:57:52

0

这就是总是对我的作品。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl"> 
<head> 
    <style type="text/css"> 
     body { 
      text-align: center; 
     } 

     #mainsite { 
      width: 770px; 
      margin: auto; 
      text-align: left; 
      background-color: red; 
     } 
    </style> 
</head> 
<body> 

<div id="mainsite"> 
    whee 
</div> 

</body> 
</html>

来源

2010-11-05 14:55:21 Les

相关问题

 相关问题