爲什麼我不能居中div？

我似乎無法居中底部div。（middle9）。爲什麼我不能居中div？

HTML和CSS看起來與上面的代碼相同。

我很抱歉，如果它很明顯，但我只是看不到它。

http://www.garyhornephotography.com/str/index.html

wrap9 { width: 900px; height: 300px; background-color:#F67E07; margin-top: 3px; text-align:center; } 
 

 
#sub_left9 { float:left;width:280px; height: 200px; background-color:#96CBF7; margin-top: 10px; margin-left:5px; } 
 
#sub_right9 { float:right; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; margin-right: 5px; } 
 
#sub_middle9 { display:inline-block; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; }

<div id="wrap9"> 
 

 
<div id="sub_left9"> left 9</div> 
 
<div id="sub_middle9"> middle 9 </div> 
 
<div id="sub_right9"> right 9 </div> 
 

 
</div><!--wrap9 -->

來源

2016-02-11 ghp1968

wrap9 { width: 900px; height: 300px; background-color:#F67E07; margin-top: 3px; text-align:center; } 
 

 
#sub_left9 { float:left;width:280px; height: 200px; background-color:#96CBF7; margin-top: 10px; margin-left:5px; } 
 
#sub_right9 { float:left; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; margin-right: 5px; } 
 
#sub_middle9 { float:left; display:inline-block; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; }

<div id="wrap9"> 
 

 
<div id="sub_left9"> left 9</div> 
 
<div id="sub_middle9"> middle 9 </div> 
 
<div id="sub_right9"> right 9 </div> 
 

 
</div><!--wrap9 -->

靜靜地飄浮他們都離開了。：d

來源

2016-02-11 22:51:48 jonode

開運片斷全屏顯示。我不認爲是所有人都在尋找。 – BenG

最簡單的方法（不float）：

#wrap9 { width: 900px; height: 300px; background-color:#F67E07; text-align:center; margin: 3px auto 0 auto;} 
 

 
#sub_left9 { display:inline-block; width:280px; height: 200px; background-color:#96CBF7; margin-top: 10px; margin-left:5px; } 
 
#sub_right9 { display:inline-block; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; margin-right: 5px; } 
 
#sub_middle9 { display:inline-block; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; }

<div id="wrap9"> 
 

 
<div id="sub_left9"> left 9</div> 
 
<div id="sub_middle9"> middle 9 </div> 
 
<div id="sub_right9"> right 9 </div> 
 

 
</div><!--wrap9 -->

如果您divs顯示器inline-block，他們將遵循同樣的流程，他們與物業texte-align:center由中心#wrap9。

來源

2016-02-11 22:52:37 n1c01a5

看起來你已經完成，在包6和包7 您沒有爲包裹9.

定義什麼，我只想讓一個類，這樣你就可以重複使用代碼:) :)

來源

2016-02-11 22:53:00 wonghenry

你缺少ID選擇#關閉的CSS爲wrap9 - 試試這個

#wrap9 { width: 900px; height: 300px; background-color:#F67E07; margin-top: 3px; text-align:center; } 
 

 
#sub_left9 { float:left;width:280px; height: 200px; background-color:#96CBF7; margin-top: 10px; margin-left:5px; } 
 
#sub_right9 { float:right; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; margin-right: 5px; } 
 
#sub_middle9 { display:inline-block; width:280px; height: 200px; background-color:#A2F685; margin-top: 10px; }

<div id="wrap9"> 
 

 
<div id="sub_left9"> left 9</div> 
 
<div id="sub_middle9"> middle 9 </div> 
 
<div id="sub_right9"> right 9 </div> 
 

 
</div><!--wrap9 -->

來源

2016-02-11 22:53:18 gavgrif

謝謝 - 一個容易錯過的事情。我也可能建議@ ghp1968調查使用Bootstrap或其他框架，以使div響應。舉例來說，一個col-md-4類會爲更寬的視口水平顯示它們，並將它們垂直堆疊在較小的視口中。仍然需要css來控制邊距和填充，但會允許使用移動版本。只是一個想法。 :) – gavgrif

#sub_right9 { 
margin-left: auto; margin-right: auto; left: 0; right: 0; position: relative; float: none; 
}

Floating從文檔的正常流程中取出一個元素，並且沒有中心浮點值。因此，您需要用上述內容替換您的CSS，以告訴「正確的9」綠色塊對齊頁面中心。

來源

2016-02-11 22:55:16 Ber

你忘了添加#wrap9它添加如下

wrap9 { width: 900px; height: 300px; background-color:#F67E07; margin-top: 3px; text-align:center; }

來源

2016-02-11 22:55:23 Microsmsm

感謝您的所有意見...非常感激。 – ghp1968

我知道這是非常令人沮喪居中DIV，因爲他們沒有對齊：「中心」標籤在HTML5中繼續工作。你也可以嘗試這個中心對齊整個網頁。

這是居中任何div標記的最簡單方法。

將下面的CSS應用到它。

#divInner { 
    width: 50%; 
    margin: 0 auto; 
}

顯然，您可以根據需要更改寬度。關鍵部分是將邊距設置爲「自動」。

如果要控制左右邊距，請將上述「邊距」屬性替換爲以下值。

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

來源

2016-02-11 23:33:35

爲什麼我不能居中div？

回答

相關問題