Supporto » Aspetto = Temi » Aiuto centrare DIV

  • Risolto mrpress01

    (@mrpress01)


    Ciao a tutti, ho un problema nel centrare dei contenitori (div) rispetto la pagina. La struttura che ho creato e la seguente

    
       <div class="conteiner1">
       <img class="img1" src="link immagine" alt="">
       <p class="p1"> Testo </p>
       <a href="Testo del link"> Leggi di più > </a>
       </div>
       <div class="conteiner1">
       <img class="img1" src="link immagine" alt="">
       <p class="p1"> Testo </p>
       <a href="Testo del link"> Leggi di più > </a>
       </div>
       <div class="conteiner1">
       <img class="img1" src="link immagine" alt="">
       <p class="p1"> Testo </p>
       <a href="Testo del link"> Leggi di più > </a>
       </div>
       <div class="conteiner1">
       <img class="img1" src="link immagine" alt="">
       <p class="p1"> Testo </p>
       <a href="Testo del link"> Leggi di più > </a>
       </div>
       <div class="conteiner1">
       <img class="img1" src="link immagine" alt="">
       <p class="p1"> Testo </p>
       <a href="Testo del link"> Leggi di più > </a>
       </div>
    

    E questo il relativo css

    
    .conteiner1 {
    float: left;
    margin: 20px;
    }
    .img1 {
    width: 310px;
    height: 190px;
    }
    .p1 {
    font-size: 20px;
    font-weight: bold;
    }
    

    L’effetto che ottengo è quello che desidero, ovvero le immagini si affiancano l’una all’altra, solo che non si centrano. Ci sono sempre degli spazi diversi a destra e a sinistra dell’ultima immagine rispetto alla pagina come se non fossero centrate. Ho provato anche a racchiudere la struttura in un div e centrarlo in orizzontale ma non sono riuscito. Qualcuno sa aiutarmi, anche cambiando struttura ma ottenendo il medesimo risultato.
    FOTO FOTO
    TESTO TESTO
    LINK LINK
    Allineati e centrati
    Grazie mille

Stai vedendo 2 repliche - dal 1 al 2 (di 2 totali)
  • Ciao @mrpress01,

    Perchè non dai uno sguardo a https://css-tricks.com/snippets/css/a-guide-to-flexbox/ flexbox ti permette di allineare gli elementi verticalmente o orizontalmente, è molto ben supportato ormai, IE10 implementa una versione meno recente della specifica come poi vedere da https://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspx ma comunque abbastanza buona https://caniuse.com/#search=flexbox anche css grid che in realtà ti permette di creare griglie molto più avanzate, non supportato ancora da versioni meno recenti di IE https://caniuse.com/#search=grid ma comunque è il futuro con cui si costruiranno le griglie.

    In definitiva io ti direi di provare flexbox che fa prioprio al caso tuo.

    Il problema che hai con la tua soluzione è dovuto dai margins dati sia a destra che a sinistra, inoltre il contenuto non è centrato perchè non definisci alcuna regola come ad esempio text-align: center. Un’altro problema con i margins è che a differenza dei paddings sono più rigidi e potrebbero portare in modo inaspettato del contenuto in una nuova riga. Inoltre l’uso dei px sarebbe da evitare, ad oggi le unità di misura che si usano sono unità di misura relative: rem, em, % che ti consiglierei di approfondire.

    Direi quindi che nel tuo caso si potrebbe sfruttare qualcosa del genere: https://jsfiddle.net/Lp7cjmez/ ovviamente non ha spazi tra sinistra e destra le colonne.

    Se dovessi usare dei gutter tra le colonne allora dovresti predisporre l’uso di un margin negativo orizontale al container, tale che ad ogni article verrà dato il gutter a destra e sinistra ed il container otterrà un margine negativo a destra e sinistra della stessa quantità del gutter dato ad una singola colonna, in questo modo il blocco del container sarà a filo con il contenitore e non avrai i margini aggiuntivi dati dalle colonne ed inoltre tutte le colonne risulteranno della stessa larghezza.

    mrpress01

    (@mrpress01)

    Grazie mille per la risposta. Alla fine ho risolto con un plugin ma vorrei usarne il meno possibile e riuscire a realizzare layout fluidi con poche righe di codice che con pesanti plugin. Ho preso parecchi spunti da quello che hai scritto e per questo ti ringrazio

Stai vedendo 2 repliche - dal 1 al 2 (di 2 totali)
  • Devi essere collegato per rispondere a questo topic.