Centrare elementi coi CSS, 8 modi diversi

Generalmente centrare elementi su una pagina web non è complicato. E invece in alcuni casi gli webmaster devono racimolare i loro cervelli per trovare la soluzione migliore.

Centrare in orizzontale  elementi non è troppo complicato , invece centrare in verticale puo causare dei problemi, beh, quando dobiamo fare uno e altro nello stesso momento  questo ci puo metere veramente in difficolta. Nell'era del design adattivo, non si sa mai dove vvera visualizato il sito .Ho contato sei diversi metodi per centrare elementi utilizzando stili CSS.Cominciamo con un semplice esempio,finiamo con il piu complesso. Lavoreremo sempre con lo stesso codice HTML:

<div class="center">
<img src="/jimmy-choo-shoe.jpg" alt="">
</div>

1.Centrare in  orizzontale usando text-align: center;

 

Talvolta, la soluzione piu semplice e anche il migliore:

div.center {
text-align: center;
background: hsl(0, 100%, 97%); }
div.center img { width: 33%;
height: auto;
}

Non vi e alcun allineamento verticale:per questo e necessario aggiungere al  div proprieta margin-top e margin-bottom.

2. Centrare in verticale e in orizontale  con margin: auto

centrare immagine in verticale

Un'altra soluzione per l'allineamento in  orizzontale:

div.center {
background: hsl(60, 100%, 97%);
}
div.center img {
display: block;
width: 33%;/*larghezza del blocco che contiene la nostra immagine, puo essere qualsiasi */
height: auto;
margin: 0 auto;/
}

Notate che per questo metodo e necessario utilizzare la proprieta  display: block.

3.Allineamento con il table-cell

 

Utilizzando display: table-cell,siamo in grado di centrare ellemento sia verticalmente che orizzontalmente. Pero abbiamo bisogno di inserire la nostra immagine in un altro elemento div.

<div class="center-aligned">
         <div class="center-core">
                 <img src="/jimmy-choo-shoe.jpg">
         </div>
</div>

CSS:

.center-aligned {
display: table;
background: hsl(120, 100%, 97%);
width: 100%;
}
.center-core {
display: table-cell;
text-align: center;
vertical-align: middle; }
.center-core img {
width: 33%;
height: auto;
}

Che tutto lavora correttamente, dobbiamo impostare la largezza di div al100%. Per centrare elemento in verticale, usiamo metodi standard tenendo in considerazione altezza. Funziona ovunque, anche in IE8+.

4.Centrare una immagine tramite position: absolute;

under-armour-micro-g-toxic-six

Per capire meglio questa soluzione dovete sapere che cosa è posizionamento in CSS

Soluzione molto interessante. E necessario impostare l'altezza del contenitore esterno:

.absolute-aligned {
position: relative;/*posizioniamo in maniera realativa il nostro blocco contenitore nel flusso normale  dei elementi della pagina  */
min-height: 500px;
background: hsl(200, 100%, 97%);
}
.absolute-aligned img {
width: 50%;
min-width: 200px;
height: auto;
overflow: auto;
margin: auto;
position: absolute;/*posizioniamo in maniera assoluta, diciamo fissa, con parametri prestabiliti, come giocatolo nella sctaola, spostando la scatola giocatolo rimane comunque sempre sul suo posto nella scatola */ 
top: 0;/* indichiamo la posizione del immagine nella scatola che rimanerrano intatti in qualsiasi situazione*/
left: 0;
bottom: 0;
right: 0;
}

5.Centrare tramite proprieta transform:translate.

jimmy-choo

La nuova soluzione, che utilizza la trasformazione CSS. Assicura sia l'allineamento in orizzontale che in verticale:

.center { background: hsl(180, 100%, 97%);
position: relative;
min-height: 500px;
}
.center img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: auto;
}

Ci sono alcuni svantaggi:

     ProprietaCSS transform richiede l'uso di prefissi del browser
     Non funziona con le vecchie versioni di IE8 (e sotto)
     Il contenitore esterno deve avere all'altezza specificata.
     Se vi è testo all'interno di un contenitore, puo essere un po 'sfocato.

6.Centrare elemento con la proprieta  flexbox

manolo-blahnik

Probabilmente l'opzione piu semplice.

.center {
background: hsl(240, 100%, 97%);
display: flex;
justify-content: center;
align-items: center;
}
.center img {
width: 30%;
height: auto;
}

Non funziona i vechie  versioni di IE . 

CSS completto:

.center {
background: hsl(240, 100%, 97%);
display: -webkit-box; /* */
display: -moz-box; /*  Firefox  */
display: -ms-flexbox; /*  IE 10 */
display: -webkit-flex; /* Chrome 21+ */
display: flex; /* Opera 12.1+, Firefox 22+ */
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

7.Allineamento con valore :calc.

 christian-louboutin

In alcuni casi,questo metodo e piu versatile rispetto all'uso di flexbox. Ma è anche il piu complicato per i calcoli che dovremo fare.

.
center { background: hsl(300, 100%, 97%);
min-height: 600px;
position: relative; }
.center img {
width: 40%;
height: auto;
position: absolute;
top:calc(50% - 20%);
left: calc(50% - 20%); }

 I calcoli sono molto semplici, il 50% e il puntocentrale del contenitore, ma il nostro compito e quello di mettere queste coordinate al 'angolo in alto a  sinistra dell'immagine. Successivamente, togliere meta dell'altezza e larghezza dell'immagine. La formula e:

top: calc(50% - (40% / 2)); left: calc(50% - (40% / 2));

In pratica potete notare che questo metodo funziona ben, se conosciamo le dimensioni degli elementi:

.center img { width: 500px; height: 500px; position: absolute; top:calc(50% - (300px / 2)); left: calc(50% - (300px – 2)); }

Questo metodoe supportato da Firefox, a partire dalla versione 4, dovrette aggingere i prefissi del browser. In IE8 non funziona. Codice completo:

.center img {
width: 40%;
height: auto;
position: absolute;
top: -webkit-calc(50% - 20%);
left: -webkit-calc(50% - 20%);
top: -moz-calc(50% - 20%);
left: -moz-calc(50% - 20%);
top: calc(50% - 20%);
left: calc(50% - 20%); }

 

Fonte lezzione: http://demosthenes.info/blog/723/Six-Ways-of-Centering-With-CSS

Letto 2100 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso