DIV内部のDIVセンターのグループを整列

私はthisのようなものを探していますが、複数のDIVのものはありますか？ hereが見つかりました現在私が持っているものを示すページをアップロードしました。DIV内部のDIVセンターのグループを整列

また、Dreamweaverでは、各アイテムの周囲に20ピクセルのパディングが表示されますが、Google Chromeでは同じアイテムは表示されません。なぜそれが分かりませんか？

結論：

DIV内部の中央DIVのへの道を探しています。（ページ幅が変更されても）
Dreamweaverでアイテムを作成した理由がわかりません。

HTML：

<html> 
<head> 
    <title>HELP</title> 
    <link rel="stylesheet" href="../_scripts/stylesheet.css" /> 
    <link rel="stylesheet" href="../_scripts/stylesheet_divs.css" /> 
    <link rel="stylesheet" href="../_scripts/stylesheet_header.css" /> 
    <link rel="stylesheet" href="../_scripts/stylesheet_content.css" /> 
    <link rel="stylesheet" href="../_scripts/stylesheet_footer.css" /> 
</head> 
<body> 
<div class="background-image-1"> 
    <div align="justify" class="content-products"> 
     <div class="product-cell-bg padding-20"> 
      <div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div> 
      <div class="float-left product-cell">Fenders</div> 
     </div> 
     <div class="product-cell-bg padding-20"> 
      <div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div> 
      <div class="float-left product-cell">Fenders</div> 
     </div> 
     <div class="product-cell-bg padding-20"> 
      <div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div> 
      <div class="float-left product-cell">Fenders</div> 
     </div> 
     <div class="product-cell-bg padding-20"> 
      <div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div> 
      <div class="float-left product-cell">Fenders</div> 
     </div> 
     <div class="product-cell-bg padding-20"> 
      <div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div> 
      <div class="float-left product-cell">Fenders</div> 
     </div> 
     <div class="product-cell-bg padding-20"> 
      <div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div> 
      <div class="float-left product-cell">Fenders</div> 
     </div> 
     <div class="product-cell-bg padding-20"> 
      <div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div> 
      <div class="float-left product-cell">Fenders</div> 
     </div> 
     <div class="product-cell-bg padding-20"> 
      <div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div> 
      <div class="float-left product-cell">Fenders</div> 
     </div> 
     <div class="product-cell-bg padding-20"> 
      <div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div> 
      <div class="float-left product-cell">Fenders</div> 
     </div> 
     <div class="product-cell-bg padding-20"> 
      <div class="float-left product-cell"><img src="../_assets/fender.png" width="150" height="150"></div> 
      <div class="float-left product-cell">Fenders</div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

出典

2016-06-19 Jesse

入れ子のグループをインライン要素として表示する必要があるように聞こえたら、を親のdiv要素に宣言してください。

.child { 
 
    min-height: 50px; 
 
    min-width: 250px; 
 
    display: inline-block; 
 
    background: #d2d2d2; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    margin-top: 10px; 
 
} 
 

 
.parent { 
 
    text-align: center; 
 
}

<div class="parent"> 
 
    <div class="child">Child element</div> 
 
    <div class="child">Child element</div> 
 
    <div class="child">Child element</div> 
 
    <div class="child">Child element</div> 
 
    <div class="child">Child element</div> 
 
</div>

出典

2016-06-19 08:54:50 UncaughtTypeError

あなたは答えを持っているように聞こえます！あなたのスニペットを実行することにより、私は必要なものを正確に動作させるように見えました！私はちょうどそれが私の最後に動作するかどうかを確認するために私のHTMLコードに適用する必要があります！（現時点では午後11時40分ですので、今は笑いをする時間がありません）私はそれを適用するチャンスが得られるとすぐに答えとしてマークし、それは仕事を管理します:) – Jesse

恐ろしい！ :)まあまあまあ。 parent = block、children = inline-blockの場合、それらのインライン要素を整列させるだけで、 'text-align'がうまく機能します。 – UncaughtTypeError

これは完璧に機能しました！私はそれがページの80％に親を置くことも可能であるかどうか疑問に思っていましたが、それも中心に置いていましたか？または、親の外に別のDIV（elder hahaという名前）を作成してブロックと中心の親とするのが最善でしょうか？ – Jesse

編集：[OK]を私はあなたのウェブ例えば見た後@Jesseそれを得ました。あなたは現在のCSS規則にいくつかの行を追加することができます。

.content-products { 
    ....... 
    width:800px; 
    margin:auto; 
}

私はそれぞれの子要素を使用して全体の幅をカウントは2列はすべて800pxを取ると私たちは、それらのそれぞれを分離するためにマージンを追加することができ390pxです。

.product-cell-bg { 
    ........ 
    margin:5px; 
}

はそれを3列を作るために、我々は .content-products幅でそれを一致させるよりも、変更画面を検出するために、後で @media screenに対処する必要があります。

出典

2016-06-19 08:05:36

私は道で、探しています何をしていること。私は明らかに "r1"の中に複数のDIVを持っています。私がしたいことは、それらをDIV全体に均一に配置することです。次に、ページ幅が縮小されると、ページ幅は互いに下に落ちて収まるようになります。私は助けてもう少し意味があることを願っています！ありがとう – Jesse

DIV内部のDIVセンターのグループを整列

答えて

関連する問題