0

我的代码如下所示：

<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/

有没有更简单的方法而不添加.content每次我希望 div 对齐到中心的时间？我正在处理的网站每页大约有 100 个。

4

5 回答 5

1

您可以创建一个容器 div，以 margin: 0 auto 居中，然后将 div 放入其中，每个 100% 宽度

于 2012-10-18T14:40:42.183 回答
1

在你的 CSS 代码中试试这个

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

演示

于 2012-10-18T14:54:17.580 回答
0

为什么不只text-align:center;在每个外包装 div 上使用？(divone, divtwo, ...)

于 2012-10-18T14:42:33.740 回答
0 
 #divone, #divtwo, #divthree, #divfour, #divfive, #divsix {
     width:960px; 
     margin:0 auto;
 }

您可以组合选择器。

如果您仍然想在 中包含 a div，#divone您#divtwo可以使用这样的选择器：#divone div, #divtwo div, #divthree div, ... {}

演示

于 2012-10-18T14:44:08.407 回答
0

我为你做了这个 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;}
于 2012-10-18T14:46:41.483 回答