對齊網頁中心的很多div，有沒有更簡單的方法？

Question

我的代碼如下所示：

<div id="divone"><div class="content">Content here</div></div> 
<div id="divtwo"><div class="content">Content here</div></div> 
<div id="divthree"><div class="content">Content here</div></div> 
<div id="divfour"><div class="content">Content here</div></div> 
<div id="divfive"><div class="content">Content here</div></div> 
<div id="divsix"><div class="content">Content here</div></div> 

的CSS：

.content { width:960px; margin:auto;} 
#divone { background-image: url(bg1.png); background-repeat: repeat;} 
#divtwo { background-image: url(bg2.png); background-repeat: repeat;} 
#divthree { background-image: url(bg1.png); background-repeat: repeat;} 
#divfour { background-image: url(bg1.png); background-repeat: repeat;} 
#divfive { background-image: url(bg1.png); background-repeat: repeat;} 
#divsix { background-image: url(bg1.png); background-repeat: repeat;} 

我做了一個的jsfiddle給你的我在做什麼http://jsfiddle.net/64H5p/

的想法是否有更簡單的方法，而不每次我想要div對齊到中心時，添加.content？我正在處理的網站每頁大約有100個。每個外包裝物的div 0汽車，然後把裏面的div，每100％的寬度

Answer 1

在你的CSS代碼試試這個

div[id^='div'] div { 
    width:120px; 
    margin:auto; 
} 

DEMO

Answer 2

您可以創建一個div容器，中心與保證金？ （divone，divtwo，...）

Answer 3

爲什麼不直接使用text-align:center;：

Answer 4

#divone, #divtwo, #divthree, #divfour, #divfive, #divsix { 
    width:960px; 
    margin:0 auto; 
} 

您可以組合選擇器。

如果你仍然想有一個div的#divone內，#divtwo你可以使用這樣的選擇：#divone div, #divtwo div, #divthree div, ... {}

Demo

Answer 5

我做了這個jfiddle你：

http://jsfiddle.net/4V68d/

看一看

或者看看這裏：

<div class="content"> 
<div id="divone">Content here</div> 
<div id="divtwo">Content here</div> 
<div id="divthree">Content here</div> 
<div id="divfour">Content here</div> 
<div id="divfive">Content here</div> 
<div id="divsix">Content here</div> 
</div>​ 

.content {margin:auto;} 
.content div{text-align: center;} 
#divone { background-image: url(bg1.png); background-repeat: repeat; background-color:red;} 
#divtwo { background-image: url(bg2.png); background-repeat: repeat;background-color:blue;} 
#divthree { background-image: url(bg1.png); background-repeat: repeat;background-color:yellow;} 
#divfour { background-image: url(bg1.png); background-repeat: repeat;background-color:green;} 
#divfive { background-image: url(bg1.png); background-repeat: repeat;background-color:pink;} 
#divsix { background-image: url(bg1.png); background-repeat: repeat;background-color:grey;}​ 

如果你想只他們的一些對齊到中心，添加一個類，你要對齊到中心

喜歡的div：

<div id="divone" class="centered">Content here</div> 

.centered {margin: 0px auto;}