Align Gruppe von DIVs Center Innerhalb eines DIV

Ich bin auf etwas wie this aber für mehrere DIVs? Ich habe eine Seite hochgeladen, die zeigt, was ich gerade habe, was man finden kann here.Align Gruppe von DIVs Center Innerhalb eines DIV

Auch bei Dreamweaver wird jedes Element mit einem 20px-Padding angezeigt, bei Google Chrome wird es jedoch nicht angezeigt. Ich bin mir nicht sicher, warum das so ist?

Fazit:

Suche nach einem Weg zum Zentrum DIV ist in einem DIV. (Auch wenn sich die Seitenbreite ändert.)
Um herauszufinden, warum die Elemente nicht angezeigt werden, wie ich sie in Dreamweaver erstellt habe.

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>

Quelle

2016-06-19 Jesse

Klingt so, als müssten Sie Ihre Gruppe verschachtelter div s als Inline-Elemente anzeigen und dann text-align: center auf dem übergeordneten Element div deklarieren.

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

Quelle

2016-06-19 08:54:50 UncaughtTypeError

Klingt wie du die Antwort hast! Durch das Ausführen Ihres Snippets schien es GENAU zu funktionieren, wie ich es brauche! Ich muss es nur auf meinen HTML-Code anwenden, um zu sehen, ob es an meinem Ende funktioniert! (ZZ seine 11:40 PM, so keine Zeit, so jetzt zu tun haha) Ich markiere es als die Antwort, sobald ich eine Chance bekomme, es anzuwenden, und es schafft zu arbeiten :) – Jesse

Ehrfürchtig! :) Ganz einfach auch; parent = Block, children = Inline-Block, dann ist es nur eine Frage der Ausrichtung dieser Inline-Elemente, "Text-Align" funktioniert gut dafür. – UncaughtTypeError

Das hat perfekt funktioniert! Ich fragte mich, ob es auch möglich war, den Elternteil auf 80% der Seite zu setzen, während THAT auch zentriert war? Oder ist es am besten, einen anderen DIV (namens elder haha) außerhalb des Elternteils zu erstellen und das zu einem Block- und Hauptelternteil zu machen? – Jesse

EDIT: ok ich habe es @Jesse nach für Ihre Web-Beispiel suchen. Sie können eine Zeile in aktuellen CSS-Regeln hinzufügen.

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

zähle ich Gesamtbreite jedes Kind Element verwendet wird 390px so können wir Marge hinzufügen jeder von ihnen, mit zwei Spalten trennen werden alle 800px nehmen.

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

es 3 Spalten zu machen, müssen wir mit @media screen später beschäftigen Bildschirm geändert zu erfassen, als es Breite mit .content-products entsprechen.

Quelle

2016-06-19 08:05:36

Das ist, was ich suche, in einer Art und Weise. Ich habe offensichtlich mehrere DIV in "r1". Was ich tun möchte, ist sie gleichmäßig über den DIV zu verteilen. Dann, wenn die Seitenbreite reduziert wird, fallen sie untereinander unter. Ich hoffe, das hat geholfen und machte ein bisschen mehr Sinn! Danke – Jesse

Align Gruppe von DIVs Center Innerhalb eines DIV

Antwort

Verwandte Themen