html - 在页面中心对齐很多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 个这样的内容。

Answer 1

在你的 CSS 代码中试试这个

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

DEMO