Centrare elementi sprovvisti di larghezza e altezza

E’ davvero possibile farlo? La prima cosa che ci assicuriamo quando dobbiamo centrare un elemento è controllare se è dotato […]
Centrare elementi sprovvisti di larghezza e altezza

E’ davvero possibile farlo?

La prima cosa che ci assicuriamo quando dobbiamo centrare un elemento è controllare se è dotato di larghezzaaltezza. Sono informazioni che ci rendono sicuramente l’operazione molto più semplice.

Ma cosa succede se non si hanno queste informazioni? è ancora possibile centrarli in modo verticale e orizzontale? Approfondendo anche in rete credo ci siano un paio di soluzioni.

Metodo display table

La prima soluzione, forse la più conosciuta, è gestire gli elementi html come se fossero tabelle in modo da avvalere della proprietà vertical-align. A questa proprietà può essere associato il valore middle che servirà a centrare il nostro elemento.

Codice Html

<div class="wp" id="wrapper_1">
    <div class="content">
        METODO DISPLAY TABLE
        Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.
    </div>
</div>

Codice Css

#wrapper_1{
    display:table;
    width:100%;
}
#wrapper_1 .content{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

Metodo contenuto generato

Questo metodo è molto interessante. Consiste nel creare un contenuto fantasma attraverso la proprietà content che va a posizionarsi con altezza al 100% prima del contenitore da centrare. Successivamente attraverso le proprietà text-align:center, display:inline-block e vertical-align:middle centriamo il tutto verticalmente ed orizzontalmente.

Codice Html

<div class="wp" id="wrapper_2">
    <div class="content">
        METODO CONTENUTO GENERATO
        Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.
    </div>
</div>

Codice Css

#wrapper_2:before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

#wrapper_2{
    text-align:center;
}

#wrapper_2 .content{
    display:inline-block;
    vertical-align:middle;
}

Conosci altri metodi?

Se conosci altri metodi su come centrare un elemento segnalacelo nei commenti o sulla la nostra fanpage. Alla prossima 😉

Provalo subito

Prova la demo Consulta il codice
  • DavideG

    Ciao Antonio.

    Sto provando ad utilizzare il secondo metodo da te segnalato (davvero una novità per me) ma ho un problema che non riesco a risolvere.

    Mi spiego meglio.

    Io ho un DIV padre con Width 100% con al suo interno vari DIV figlio con Width varie e floattati a sinistra. Vorrei centrare i vari DIV figlio solo orizzontalmente.

    Utilizzando il tuo metodo ottengo sì che i DIV figlio siano centrati, ma ognuno su una riga differente, mentre quello che vorrei è averli tutti sulla stessa riga. Floattati a sinistra e centrati.

    E’ possibile? Grazie in anticipo per l’eventuale risposta.

  • Di nulla. Qualsiasi problema siamo qua!

  • Pingback: Metodi per centrare elementi in absolute | Laboratorio CSS()

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github