Come centrare più div all'interno di un contenitore in CSS

Sto testando il divisore centrale come lo stile di Windows Metro. se controlli seguente codice: Come centrare più div all'interno di un contenitore in CSS

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

La scatola grigia è del 70% e la centratura sullo schermo che è corretto, ma quando faccio la finestra più ampia e divisori verdi sono in movimento, si può vedere che le caselle verdi in un punto non sono centrate.

Sto cercando per questo già l'intera giornata: s

Come mi può aiutare su questo?

fonte

2013-06-19 Jan Van Looveren

Si potrebbe applicare lo stile text-align:center; al vostro contenitore e visualizzare le vostre .block s come elementi inline-block:

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

Ecco un aggiornamento Fiddle

Avviso Ho commentato fuori lo spazio bianco tra i tuoi <div> s. Poiché gli elementi ora sono visualizzati in linea, i tuoi spazi saranno riconosciuti. Questo è one of many ways per "combattere lo spazio".

fonte

2013-06-19 10:19:26 George

quasi lì Credo, se faccio lo schermo più piccolo, la scatola è centro perfectlly, ma se faccio 3-3-2 caselle poi la riga inferiore è anche centrato, ut in realtà dovrebbero allinearsi nella casella 1 e nella colonna 1 –

@JanVanLooveren. Come hai risolto il problema dell'ultima riga centrata anziché allineata a sinistra nel caso 3-3-2? –

@mattforsythe Quello che sembra essere il problema se desideri un diverso allineamento puoi cambiare 'text-align' di' .container': http://jsfiddle.net/Np4tA/558/ – George

se si modifica lo stile sul vostro elemento .block così invece di float:left; si utilizza display:inline-block; è quindi possibile aggiungere text-align:center al .container

Example

fonte

2013-06-19 10:19:28 Pete

-1

<body> 

<div class="container"> 
     <div style="width:78%; margin:0 auto;"> 
     <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> 
</div> 
</body>

Prova questo div "<div style="width:78%; margin:0 auto;">"

fonte

2013-06-19 10:24:19 sarfaraj

utilizzando gli stili in linea è davvero una cattiva pratica –

Lo so, ma solo un esempio. – sarfaraj

okey ................... :) –

Quindi in pratica il tuo CSS ha bisogno di questi cambiamenti

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

per rendere il CSS compatible with IE7.

Per allineare le tessere in basso a sinistra, è necessario un javascript. A causa della compatibilità con le versioni precedenti di .querySelector(), le seguenti operazioni funzionano ovunque incluso IE8 +; per la semplificazione e la compatibilità IE7 jQuery è altamente consigliato:

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

fonte

2013-06-19 14:07:51 Stano

Ora è possibile utilizzare Flexbox proprietà come base per i layout. Ciò ti consentirà un maggiore controllo sugli elementi figli.

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

Nota: È necessario bisogno di convalidare l'support e forse bisogno di alcuni prefissi vendor. Ma come aprile del 2017 la maggior parte dei browser ne consente l'uso.

fonte

2017-04-07 16:08:46 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>

fonte

2017-09-27 15:47:52 antelove

Come centrare più div all'interno di un contenitore in CSS

risposta

Problemi correlati