Banner

HTML - Centrare orizzontalmente un contenitore

Qualora si debba centrare nella pagina un contenitore come un DIV si può fare in questo modo:

Metodo 1: impostare i margini dx e sx su AUTO e inserire un valore per la larghezza del contenitore.

<!DOCTYPE>
<html>
  <head>
    <title>Centrare orizzontalmente un contenitore</title>
    <style>
      .Contenitore{
        margin: 0px auto;
        width: 30%;
        height: 250px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="Contenitore"></div>
  </body>
</html>

La dimensione del contenitore, un DIV, è stata impostata al 30%, ma potevamo tranquillamente usare un valore specifico come 180px. Gli attributi altezza e colore dello sfondo sono stati inseriti per rendere più esplicito il risultato finale. Pagina di Esempio.

Metodo 2: nel caso in cui non disponiamo della dimensione esatta della sua larghezza, possiamo risolvere inserendolo in un ulteriore contenitore.

<!DOCTYPE>
<html>
  <head>
    <title>Centrare orizzontalmente un contenitore senza larghezza</title>
    <style>
      .Contenitore{
        text-align: center;
        border: 2px solid yellowgreen;
      }
    </style>
  </head>
  <body>
    <div class="Contenitore">
      <div>Contenitore centrato</div>
    </div>
  </body>
</html>

Pagina di Esempio.

HTML - Centrare orizzontalmente e verticalmente un contenitore

Nel caso in cui si debba centrare nella pagina, in orizzontale e in verticale, un contenitore si può procedere in questo modo:

Si deve lavorare sfruttando la posizione assoluta del contenitore. Innanzitutto spostiamo il nostro oggetto al centro dello schermo impostando gli attributi top e left al 50%, poi, considerato che il punto di riferimento di ogni contenitore è lo pigolo in alto a sinistra, lo facciamo arretrare verso destra e verso l'alto di una quantità di pixel pari alla metà della larghezza e altezza rispettivamente, portandolo esattamente al centro della pagina.

<!DOCTYPE>
<html>
  <head>
    <title>Centrare orizzontalmente e verticalmente un contenitore</title>
    <style>
      .Contenitore{
        width: 200px;
        height: 130px;
        background-color: orange;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -65px;
        margin-left: -100px;
      }
    </style>
  </head>
  <body>
    <div class="Contenitore"></div>
  </body>
</html>

Pagina di Esempio.

Siti Ufficiali Editor Free Guide Online Utility
Microsoft Visual Studio MSDN InnoSetup
Apple XCode Documentazione .Net Cyber Installer
Oracle NetBeans Apple Developer NSIS
Debian Eclipse W3C Diagram Online
Distrowatch Bluefish W3C Validator Junior Icon Editor
Brackets W3Schools Edit Cursors Online
TextWrangler

Sito realizzato da Fiaschi Francesco - Aggiornamento Dicembre 2018

W3C - XHTML 1.1 Validated