1. 首頁
  2. 問答
  3. 圍繞主DIV

圍繞主DIV

2010-11-05 125 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

相關問題

 相關問題