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

Windows

Come Eliminare Lo Sfondo Bianco Dalle Immagini con Gimp

Può capitare che per un lavoro grafico, quale una relazione universitaria/di lavoro o l'aggiornamento del vostro blog o la modifica di un fotomontaggio, bisogna utilizzare una determinata immagine vista su un qualche sito sparso nel web. Perfetto, la...
Programmazione

Come usare il metodo animate di jQuery

JQuery è una libreria di funzioni scritta in Javascript, che può essere utilizzata su diversi browser e permette di aggiungere delle funzionalità alle pagine HTML. Il comando Animate, come dice la sua traduzione dall'inglese: "Animato", permette di...
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,...
Programmazione

CSS: 10 cose da sapere

CSS è la sigla che sta per Cascading Style Sheets, ovvero i fogli di stile a cascata che servono per la gestione del layout di un sito web. Grazie ad essi è possibile interagire sugli aspetti visuali delle pagine, controllandone tutti gli elementi grafici....
Internet

Come stampare una pagina Html

Nel caso in cui abbiate la necessità di stampare una pagina HTML, è bene che sappiate che, in alcuni casi, non è possibile stamparle con la formattazione originale. Questo inconveniente rischia di causare la pardite di parte del contenuto della pagina...
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 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 pagina html

L'Html è il linguaggio di formattazione che descrive come impaginare o visualizzare un contenuto di una pagina con dei tag di formattazione. L'Html non prevede un linguaggio di programmazione in quanto il suo codice è in grado solo di strutturare un...
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 »”.