Centrare orizzontalmente un elemento blocco

Centriamo un elemento blocco In questo articolo ti voglio illustrare come centrare orizzontalmente un div o un qualsiasi elemento blocco […]
Centrare orizzontalmente un elemento blocco

Centriamo un elemento blocco

In questo articolo ti voglio illustrare come centrare orizzontalmente un div o un qualsiasi elemento blocco all’interno di una pagina web e per farlo, analizzeremo insieme la questione per gradi di difficoltà crescenti. Le casistiche sono svariate e cambiano in base a come la larghezza e i relativi margini vengono definiti.

Notazioni Abbreviate

Apriamo una piccola parentesi sulle notazioni abbreviate, ti ricordo che quando si definiscono solo due valori, il primo corrisponde al margine superiore e inferiore mentre il secondo corrisponde a quello sinistro e destro. Quando invece se ne definiscono solo tre, il primo è relativo al margine superiore, il secondo ai due margini laterali sinistro e destro mentre il terzo al margine inferiore.

Nel flusso del documento con larghezza definita in pixel o in percentuale.

La situazione più semplice è quella di un elemento di blocco con la larghezza nota e inserito nel normale flusso del documento. Non c’è molto da dire al riguardo, con la larghezza nota espressa in pixel o in percentuale (inferiore al 100%) basterà impostare i margini laterali sinistro e destro ad auto e il motore del browser calcolerà in automatico i valori dei due margini necessari affinchè il riquadro elemento del nostro div sia pari alla width dell’elemento padre, nel nostro caso il body.

Se hai dubbi, potrà esserti utile rileggere l’articolo riguardante la formattazione degli elementi di blocco

/*In questo caso la larghezza è espressa in pixel*/
#elemento1 {
    width:100px;
    margin: 0 auto;
}
/*Qui invece abbiamo una larghezza pari al 90% dell'elemento padre*/
#elemento2 {
    width:90%;
    margin:0 auto;
}

Nel flusso del documento con larghezza impostata ad auto

Un elemento di blocco con la larghezza impostata ad auto occuperà tutto lo spazio a sua disposizione a meno che non ci siano anche bordi padding e margin a limitarne il valore. In assenza di qualsiasi altro valore, width: auto corrisponderebbe a width:100%.

A questo punto intervengono i margini, che se settati in maniera appropriata possono “spingere” e quindi ridurre la width del nostro elemento e centrarlo.

#elemento3 {
    width:auto;
    margin: 0 50px;
}
#elemento4 {
    width:auto;
    margin: 0 20%;
}

Posizionato in absolute con larghezza definita in pixel

Passiamo adesso alla centratura orizzontale di un div posizionato in assoluto e quindi totalmente estratto dal flusso del documento ma con una larghezza nota in pixel. In questo caso possiamo agire sullo scostamento sinistro (non basta solo questo perchè ci sono altri 300px della width che sbilanciano) compensandolo con il margine sinistro negativo pari alla metà della larghezza del nostro elemento. Il top ovviamente è facoltativo e dipendedalle tue esigenze grafiche e strutturali.

#elemento5 {
    width:300px;
    position:absolute;
    left:50%;
    margin-left:-150px;
}

Posizionato in absolute con larghezza definita in percentuale.

Passiamo adesso alla centratura orizzontale di un div posizionato in assoluto con una larghezza nota in percentuale. In questo particolare caso non abbiamo un valore fisso in pixel ma una percentuale riferita al nostro contenitore.

Abbiamo tre strade che possiamo intraprendere (due delle quali verranno spiegate subito), entrambe che portano al medesimo risultato.

La prima è identica al precedente caso, con la differenza che si lavora in percentuale e non in pixel (#elemento5).

La seconda strada invece prevede l’utilizzo combinato degli offset left e right contemporaneamente. Definiamo uno scostamento controllato dal limite sinistro e destro del contenitore. Il valore di width sarà calcolato in base alla percentuale di scostamento da sinistra e destra che abbiamo impostato. In questo caso abbiamo un left del 5% e un right del 5%, in assenza di altri valori che possono influenzare la superficie totale del riquadro elemento, avremo una larghezza dell’elemento pari al 90% … è tranquillamente concesso in questo caso non impostare la width, il suo valore verrà ricavato in automatico.

La terza e ultima strada prevede invece una dichiarazione esplicita per la width ma ne parliamo meglio nel prossimo esempio.

#elemento5 {
    width: 90%;
    position: absolute;
    left: 50%;
    margin-left: -45%;
}
#elemento6 {
    position:absolute;
    left:5%;
    right:5%;
}

Posizionato in absolute con larghezza definita in percentuale e una max-width

Sicuramente è altamente improbabile che una situazione del genere possa capitarti spesso, ma voglio prenderla comunque in considerazione in quanto non molto tempo fa mi sono trovato in una situazione del genere. In questo caso il nostro obbiettivo è quello di centrare orizzontalmente un elemento blocco che abbia una larghezza impostata in percentuale ma che abbia anche una max-width di 1000px. C’è qui un utilizzo combinato delle percentuali e dei pixel e la difficoltà piu grande è che non è possibile utilizzare il margine negativo statico come abbiamo fatto nei precedenti casi, in quanto andrebbe bene solo nel momento in cui l’elememento in questione raggiunga i 1000 pixel di larghezza (solo in questo caso conosciamo la sua larghezza e possiamo definire il valore del margine corrispondente (-500px).

Dai 1000px a scendere abbiamo una larghezza settata come 100% del nostro contenitore ed è palese che il margin-left : -500px non vada più bene a causa delle più disparate risoluzioni di schermi in cui verrà visualizzato il nostro elemento. Abbiamo anche qui due strade da poter intraprendere. Ti ricordi che la somma delle (9 in questo caso) proprietà della formattazione orizzontale deve essere pari alla width dell’elemento contenitore? Nove perché, a differenza degli elementi inclusi nel normale flusso, ora abbiamo anche gli offset lift e right che entrano in gioco

LEFT + MARGIN-LEFT + BORDER-LEFT + PADDING-LEFT + WIDTH + PADDING-RIGHT + BORDER-RIGHT + MARGIN-RIGHT + RIGHT = WIDTH ELEMENTO CONTENITORE

Anche in questo caso settando ad auto i due margini e dichiarando un valore per tutte le altre proprietà sarà possibile centrare in orizzontale un elemento posizionato in assoluto, i due margini verranno ricalcolati affinché l’equazione venga rispettata. Questo metodo potrà essere tranquillamente applicato sia in questo caso della max width ma anche nei precedenti in cui avevamo solo misure espresse in pixel o in percentuale.

#elemento7{
left: 0;
margin: 0 auto;
max-width: 1000px;
position: absolute;
right: 0;
width: 90%;
}

Javascript ci viene in aiuto

Ti ho parlato di una seconda strada poco fa. Ebbene, per gli amanti del metodo del margin-left negativo, anche in questo caso possiamo operare in tal senso; definendo lato javascript un margine dinamico che aggiorni automaticamente il suo valore e garantisca una centratura perfetta. Il codice che gestisce il tutto è molto semplice, ti inserisco direttamente il markup organizzato e commentato in maniera tale che tutto venga compreso.

/*Resettiamo qualsiasi valore a zero*/
*{margin:0;padding:0;}

#centratoAbs{
    height:50px;
    width:100%;
    max-width:1000px;
    background:green;
    position:absolute;
    top:100px;
    left:50%;
    /*margin-left: il suo valore verrà valorizzato dinamicamente in uno style e quindi non verrà definito qui.*/
}

Questo che segue è la parte relativa all’html

<!-- questo paragrafo terrà traccia della larghezza del div -->
<p id="larghezza"></p>

<!-- questo paragrafo terrà traccia del margine sinistro -->
<p id="marginleft"></p>

<!-- Questo è il div che verrà centrato -->
<div id="centratoAbs"></div>

Infine inseriamo la parte relativa al javascript che gestisce dinamicamente il margine sinistro.

// Creo una funzione rileva che verrà richiamata all'onload della pagina
function rileva() {
    // intercettare la width del div e inserisco il suo valore in una variabile
    var elemento = document.getElementById("centratoAbs");
    var larghezzaelemento = elemento.clientWidth;

    //calcolo il valore del margin-left
    var marginesinistro = -(larghezzaelemento/2) + "px";

    // Innietto dinamicamente il valore nello style per centrare l'elemento
    elemento.style.marginLeft = marginesinistro;

    //ripeto l'operazione ogni 50 millisecondi
    setTimeout(rileva,50);

    //Visualizzo a video l'attuale larghezza del div e del margin-left (opzionali)
    document.getElementById("larghezza").innerHTML="la width attuale del div è: " + larghezzaelemento + "px";
    document.getElementById("marginleft").innerHTML="Il margin-left attuale è: " + marginesinistro + "px";
}

//Richiamo la funzione rileva
window.onload = function() {
    rileva();
}

La teoria è importante

Le casistiche come abbiamo visto sono disparate e varie. Padroneggiare le proprietà fondamentali della formattazione visiva degli elementi significa capire sempre e immediatamente come risolvere un problema o come aggirarlo al meglio. La pratica sul campo va bene sempre e comunque, ma sono dell’opinione che una forte base teorica alle spalle possa far risparmiare molto tempo agli sviluppatori nella progettazione e nel debug del codice.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github