在另一箇中心Div（100％寬度）div

這裏很「簡單」的問題，不知道爲什麼它如此複雜。在另一箇中心Div（100％寬度）div

有一個100％（寬）尺寸的div。
有另一個DIV定位在這個div的中間（大小940px寬）

任何想法？ :)

2009-09-14 Shadi Almosri

可能重複的[如何在DIV中集中DIV？]（http://stackoverflow.com/questions/114543/how-to-center-div-in-div） – slugster 2011-10-22 07:49:19

.parent { text-align: center; } 
.parent > .child { margin: 0 auto; width: 900px; }

來源

2009-09-14 20:13:07 geowa4

我錯過了文本對齊因爲我有餘量，並沒有工作。接受，歡呼。 – 2009-09-14 20:16:35

text-align：center並不能幫助集中內部div。儘管如此， – Vizjerai 2009-09-14 20:18:55

會將內容（文本）居中，從而產生相同的期望結果（如果只有文本）。爲了自動保證金的工作，你還需要在內部div的寬度。 – geowa4 2009-09-14 20:25:15

以下樣式的內部div將居中。

margin: 0 auto;

來源

2009-09-14 20:12:53

只需添加margin: 0 auto;到裏面DIV。

來源

2009-09-14 20:13:36 ScottE

關鍵是margin：0 auto;內部div上的。驗證的概念的一個例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<body> 
    <div style="background-color: blue; width: 100%;"> 
     <div style="background-color: yellow; width: 940px; margin: 0 auto;"> 
      Test 
     </div> 
    </div> 
</body> 
</html>

來源

2009-09-14 20:15:28 Larsenal

這是一個很好的答案，因爲如果您使用邊距，請使用正確的文檔類型，這一點至關重要：0自動技術 – ScottE 2009-09-14 21:00:05

查看詳細信息，讓我們說下面的代碼將一個div對齊中心：

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

或簡單地使用：

margin: 0 auto;

但請記住，上面的CSS代碼只在你的html元素指定一個固定寬度（不是100％）時才起作用。所以你的問題的完整的解決方案將是：

.your-inner-div { 
     margin: 0 auto; 
     width: 900px; 
}

來源

2009-09-14 21:01:19 Khashayar

這是一個很好的示例，因爲您正確指出需要內部div的寬度。 – 2009-10-04 16:22:56

.outerdiv { 
    margin-left: auto; 
    margin-right: auto; 
    display: table; 
}

不Internet Explorer 7中工作......但誰在乎呢？

來源

2011-10-14 18:34:03 DeFliGra

在另一箇中心Div（100％寬度）div

回答

相關問題