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/

.contentdiv を中央に配置するたびに追加せずに簡単な方法はありますか? 私が取り組んでいるサイトには、1 ページあたり約 100 のこれらがあります。

4

5 に答える 5

1

コンテナdivを作成し、マージン：0 autoで中央に配置してから、それぞれ100％の幅のdivを内部に配置できます。

于 2012-10-18T14:40:42.183 に答える
1

CSSコードでこれを試してください

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

デモ

于 2012-10-18T14:54:17.580 に答える
0 
 #divone, #divtwo, #divthree, #divfour, #divfive, #divsix {
     width:960px; 
     margin:0 auto;
 }

セレクターを組み合わせることができます。

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 に答える
0

text-align:center;各外側のラッパー divで使用しないのはなぜですか? (divone、divtwo、...)

于 2012-10-18T14:42:33.740 に答える