it-swarm.com.de

So zentrieren Sie mehrere Divs in einem Container in CSS

Ich teste, um Teiler wie der Stil der Windows-Metro zu zentrieren. wenn Sie folgenden Code überprüfen:

.container {
    height: 300px;
    width: 70%;
    background: #EEE;
    margin: 10px auto;
    position: relative;
}
.block {
    background: green;
    height: 100px;
    width: 100px;
    float: left;
    margin: 10px;
}
<div class="container">
  <div class="block">1. name of the company</div>
  <div class="block">2. name of the company</div>
  <div class="block">3. name of the company</div>
  <div class="block">4. name of the company</div>
  <div class="block">5. name of the company</div>
  <div class="block">6. name of the company</div>
  <div class="block">7. name of the company</div>
  <div class="block">8. name of the company</div>
</div>

Das graue Kästchen ist zu 70% und zentriert sich auf dem Bildschirm, was korrekt ist. Wenn ich das Fenster breiter mache und die grünen Trennlinien sich bewegen, können Sie feststellen, dass die grünen Kästchen an einem bestimmten Punkt nicht zentriert sind.

Ich suche das schon den ganzen Tag: s

Wie kann mir diesbezüglich weitergeholfen werden?

43

Sie können den Stil text-align:center; Auf Ihren Container anwenden und Ihre .block Als Inline-Block-Elemente anzeigen:

.container {
  width: 70%;
  background: #eee;
  margin: 10px auto;
  position: relative;
  text-align:center;
}

.block {
  background: green;
  height: 100px;
  width: 100px;
  display:inline-block;
  margin: 10px;
}
<div class="container">
   
        <div class="block">1. name of the company</div><!--
     --><div class="block">2. name of the company</div><!--
     --><div class="block">3. name of the company</div><!--
     --><div class="block">4. name of the company</div><!--
     --><div class="block">5. name of the company</div><!--
     --><div class="block">6. name of the company</div><!--
     --><div class="block">7. name of the company</div><!--
     --><div class="block">8. name of the company</div>
</div>

Hier ist eine aktualisierte Geige

Beachten Sie, dass ich den Leerraum zwischen Ihren <div> Auskommentiert habe. Da die Elemente jetzt inline angezeigt werden, werden Ihre Leerzeichen bestätigt. Dies ist eine von vielen Möglichkeiten , um den Raum zu bekämpfen.

74
George

wenn Sie den Stil Ihres Elements .block ändern, so dass Sie anstelle von float:left;display:inline-block; verwenden, können Sie text-align:center zu .container hinzufügen.

Beispiel

7
Pete

Grundsätzlich benötigt Ihr CSS diese Änderungen

.container { text-align:center; }
.block { display:inline-block; *display:inline; zoom:1; vertical-align:top; }

um das CSS mit dem IE7 kompatibel zu machen .

Um die unteren Kacheln an der linken Seite auszurichten, ist Javascript erforderlich. Aufgrund der . QuerySelector () Abwärtskompatibilität funktioniert Folgendes überall, einschließlich IE8 +; Zur Vereinfachung und zur IE7-Kompatibilität wird jQuery dringend empfohlen:

if (!window.addEventListener) {
    window.addEventListener = function (type, listener, useCapture) {
        attachEvent('on' + type, function () {
            listener(event);
        });
    };
}
window.addEventListener('load', makePaddings, false);
window.addEventListener('resize', makePaddings, false);

function makePaddings() {
    var container = document.querySelector('.container');
    var blocks = document.querySelectorAll('.block');
    var br = [],
        max = 0,
        i = 0;
    var top = blocks[0].getBoundingClientRect().top;
    while (blocks[i] && blocks[i].getBoundingClientRect().top == top) {
        i++;
    }
    var show = blocks.length % i ? i - blocks.length % i : 0; /* how many paddings are needed */
    var paddings = document.querySelectorAll('.padding');
    if (paddings.length < show) { // add missing paddings
        i = show - paddings.length;
        while (i--) {
            var elem = document.createElement('div');
            elem.className = 'padding';
            elem.style.visibility = 'hidden';
            container.appendChild(elem);
        }
        paddings = document.querySelectorAll('.padding');
    }
    for (i = 0; i < paddings.length; i++) {
        paddings[i].style.display = (i < show) ? 'inline-block' : 'none';
    }
}

jsfiddle

4
Stano

Jetzt können Sie die Eigenschaft Flexbox als Basis für Ihre Layouts verwenden. Auf diese Weise können Sie die untergeordneten Elemente besser steuern.

.container {
    width: 70%;
    background: #EEE;
    margin: 10px auto;
    position: relative;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
.block {
    background: green;
    height: 100px;
    width: 100px;
    margin: 10px;
}
<div class="container">
  <div class="block">1. name of the company</div>
  <div class="block">2. name of the company</div>
  <div class="block">3. name of the company</div>
  <div class="block">4. name of the company</div>
  <div class="block">5. name of the company</div>
  <div class="block">6. name of the company</div>
  <div class="block">7. name of the company</div>
  <div class="block">8. name of the company</div>
</div>

Hinweis: Sie müssen Support validieren und benötigen möglicherweise einige Herstellerpräfixe. Aber seit April 2017 erlauben die meisten Browser die Verwendung.

3
DaniP
.container {
  background: lightgrey;
  height: auto;
  width: 70%;

  margin: 10px auto;
  position: relative;
  
  display: flex;
  flex-wrap: wrap;  
  justify-content: space-around;
}
.block {
  background: green;
  height: 100px;
  width: 100px;
  
  margin: 10px;
}
<div class="container">
  <div class="block">1. name of the company</div>
  <div class="block">2. name of the company</div>
  <div class="block">3. name of the company</div>
  <div class="block">4. name of the company</div>
  <div class="block">5. name of the company</div>
  <div class="block">6. name of the company</div>
  <div class="block">7. name of the company</div>
  <div class="block">8. name of the company</div>
</div>
2
antelove