Come centrare con CSS

Tramite: O2O
Difficoltà: difficile
16

Introduzione

È frequente imbattersi in siti web le cui finestre siano completamente allineate a sinistra. Ciò può essere fastidioso sia dal punto di vista visivo, sia nel caso si voglia utilizzare il background per ospitare immagini o annunci pubblicitari.
Centrare orizzontalmente un div utilizzando HTML5 e CSS è tuttavia relativamente facile: basta scrivere una sola istruzione (margin) impostata sui valori "auto" sia a destra che a sinistra, senza dover necessariamente conoscere le dimensioni esatte della finestra da centrare, cosa invece indispensabile per la centratura verticale della pagina. Attraverso questa breve guida che vi proponiamo oggi andremo a vedere come centrare con CSS in modo molto semplice e veloce così da poter finalmente eliminare il fastidio delle finestre web che si aprono completamente allineate a sinistra.

26

Centrare orizzontalmente un div con CSS

Ecco come bisogna iniziare per poter centrare orizzontalmente un div con CSS
-------
Ecco la sintassi che dovremo utilizzare per effettuare la nostra operazione:
-------

div#centraturaorizzontale {
width: 800px;
height: 600px;
background: #000000;
margin: 0 auto;}.

36

Esempio di pagina web centrata orizzontalmente

Diamo ora come esempio l'URL di una pagina nel cui file CSS sia stata generata una div "page"
http://www.forum2.it/politica/103-anatomia-del-suicidio-di-stato.html
con le seguenti caratteristiche:

z-index: 1; width: 1024px;
min-height: 5940px;
background-image: none;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
margin-top: -1px;

Come si potrà osservare la pagina di larghezza 1024 pixel verrà centrata orizzontalmente grazie alle istruzioni:

margin-left: auto;
margin-right: auto;.

Continua la lettura
46

Centrare verticalmente una pagina con CSS

Vediamo ora come procedere per centrare verticalmente una pagina con CSS. È necessario conoscere le dimensioni del div. Nell'esempio di cui sopra, immaginiamo di voler centrare la prima pagina (di 1024x630px) al centro della videata.
Per centrarla utilizzeremo l'istruzione "absolute" (assoluto) impostando i margini superiore e inferiore in base alle reali dimensioni del div.
Ecco il codice:
------
div#verticale {
width: 1024px;
height: 630px;
background: #000000;
position: absolute;
top: 50%; left: 50%;
margin-top: -315px;
margin-left: -512px;}

I valori di top e left sono impostati al 50%, cioè la metà della videata. In tal caso però il div avrebbe il suo bordo sinistro superiore al centro esatto della pagina; per ovviare a ciò, occorre bisogna spostare i due margini (quello superiore e quello sinistro) di un valore negativo pari alla metà della dimensione del div. In questo caso margin-top: -315px; è la metà di 630px e margin-left: -512px; è la metà di 1024px. A questo punto avremo ottenuto quanto richiesto, ovvero poter centrare con CSS molto semplicemente.
Così adesso potrete effettuare voi stessi sui vostri Pc questa operazione in modo da non dovere più imbattervi in quelle fastidiosissime finestre completamente allineate a sinistra. Nel caso in cui non dovesse funzionare questa procedura controllare di aver seguito correttamente tutti i passaggi precedentemente illustrati.

56

Guarda il video

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Segnala il video che ritieni inappropriato
Devi selezionare il video che desideri segnalare
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Internet

Come centrare un oggetto in html

HTML è il linguaggio di programmazione utilizzato per disegnare le pagine web.In questa guida, passo dopo passo, vedremo come centrare un oggetto in HTML. Solitamente in ogni testo scritto, si usa l'allineamento a sinistra per il corpo del documento,...
Internet

Come centrare pagina Google

Può capitare che, navigando in internet, improvvisamente, per motivi esterni, o procurandolo involontariamente, si sposti o si ingrandisca la schermata visualizzata. Se la vostra pagina Google risulta spostata, tagliata e decentrata, non allarmatevi:...
Internet

Come centrare la pagina di Google

In questo articolo vi spiegherò come centrare la pagina di Google. Molto spesso può capitare a tutti di avere dei problemi con la corretta visualizzazione della pagina web. Ad esempio può succedere di accendere il proprio computer e di ritrovarsi di...
Internet

Come centrare un video

Oggi grazie a questa semplice guida cercheremo di capire come centrare un video all'interno di post o articolo sul web, in modo da consentire a tutti coloro che visualizzano il testo di vedere ben centrato ed ordinato anche il video ad esso correlato....
Internet

Come centrare una pagina html

Hai creato un sito web o una pagina di un blog e il testo non vuole saperne di stare al centro della pagina? Le immagini e i paragrafi risultano decentrati, spostati a sinistra e risulta tutto attaccato e di difficile lettura?Il codice html usato nelle...
Internet

Come centrare le foto sul profilo Facebook

Facebook è senza dubbio il social network più utilizzato dalle persone di tutto il mondo. Grazie ad esso, infatti, è possibile mettere in contatto due o più persone indipendentemente dalla distanza in cui essi si trovano. Ma oltre a questo, Facebook...
Internet

Come centrare un'immagine HTML

Le immagini HTML sono quelle che danno ad un sito Internet un aspetto piacevole, che spiegano meglio quanto vi viene descritto e che lo rendono maggiormente “appetibile” per i visitatori. Utilizzare in modo sapiente le immagini in un sito web o in...
Internet

Come modificare un tema wordpress

In un sito, il tema è in grado di controllare l'aspetto generale, compreso il layout di pagina, il posizionamento di widget, il font di default e scelte dei colore. WordPress. Com presenta una vasta gamma di temi per i suoi utilizzatori, che si possono...
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer »”.