Centrare gli elementi DIV con i CSS

Durante la sperimentazione di layout tableless, ho trovato molto interessante questo trucchetto per centrare orizzonzalmente un elemento DIV.

Sfruttando i fogli di stile è sufficente impostare le proprieta margin-left e margin-right su auto.

Sotto potete vedere il risultato …

Elemento Cetrato

Questo è il codice che ho usato.

Per praticità ho impostato le proprietà direttamente nell’elemento tramite style ma vi suggerisco di dividere la logica della pagina dalla visualizzazione se non altro per pulizia del codice.

16 commenti

  1. salve, vorrei usare questo template ma devo centrare la pagina … e non ci riesco ho letto i vs. consigli ma non ci riesco il documento css è
    /* Online Business, free web template by davereederdesign.com */

    body {
    margin: 0;
    padding: 0;
    font-size: 100%;
    text-align: left;
    background: #e0e0e0;
    color: #333;
    }

    /* Global styles */
    * {margin: 0; padding: 0; border: 0;}
    span {color: #00A2FF}
    p, ul, p a, h2 {font-family: Arial, Helvetica, sans-serif}

    /* Heading styles */
    h1 {margin-left: 10px; font-family: Georgia, serif; color: #333; float: left; font-weight: normal; margin-left: 10px; font-size: 1.55em}
    h1 a:link, h1 a:visited, h1 a:active {text-decoration: none; color: #333; font-weight: normal}
    h1 a:link span, h1 a:visited span, h1 a:active span {text-decoration: none; font-weight: normal}
    h1 a:hover {color: #00A2FF; text-decoration: none; font-weight: normal}
    h1 a:hover span {color: #333; text-decoration: none; font-weight: normal}

    h3 a, h3 a:link, h3 a:hover {font-weight: normal} /* styling for h3 heading links */
    h4 a, h4 a:link, h4 a:hover, h5 a:link, h5 a:hover {font-weight: bold} /* styling for other heading links */

    h2 {margin: 0; padding-left: 10px; font-size: 0.75em; background-color: #333; color: #fff; line-height: 2.0em} /* headings on black backgrounds */

    h3, h4, h5 {font-family: Georgia, serif; margin: 20px 0 0 10px}
    h3 {font-size: 1.25em; line-height: 1.25em; font-weight: normal}
    h4 {font-size: 0.90em; line-height: 0.90em; font-weight: bold}
    h5 {font-size: 0.70em; line-height: 0.70em; font-family: Arial, Helvetica, sans-serif; font-weight: bold} /* appears like bold paragraph text */

    /* Text styles */
    p {margin: 10px; font-size: 0.70em; line-height: 1.75em}

    p.updated {margin-left: 10px; font-size: 0.60em; line-height: 0.60em; letter-spacing: 0.05em; color: #888}

    #siteimg p { /* This is the large text in the site img div */
    margin: 0 0 0 10px; /* removed usual top and bottom margin from paragraph to avoid layout breaking */
    padding-left: 10px;
    padding-top: 90px;
    font-family: Georgia, serif;
    font-size: 1.45em;
    line-height: 1.05em;
    font-weight: normal;
    letter-spacing: -0.05em;
    }

    acronym {border-bottom: 1px dashed #333; cursor: help}

    ul {margin-left: 10px; font-size: 0.70em; line-height: 1.75em; list-style: inside square}

    /* Paragraph Links */
    a {color: #00A2FF; font-weight: bold; text-decoration: none} /* The blue colour */
    a:link {color: #00A2FF; font-weight: bold; text-decoration: none}
    a:hover {color: #333; font-weight: bold; text-decoration: none}

    /* Divs */

    #container {
    width: 770px; /* Suits an 800×600 page, allowing for scrollbar */
    background: #fff;
    overflow: hidden
    }

    #topbar { /* Top bar, can be used for extra links etc */
    width: 770px;
    height: 25px;
    background: #333
    }

    #hdr { /* Header/Banner area */
    width: 770px; /* Suits an 800×600 page, allowing for scrollbar */
    height: 4.5em; /* Same as h1 line-height */
    line-height: 4.5em;
    background: #fff
    }

    #navbar { /* Main Navigation area */
    width: 770px; /* Suits an 800×600 page, allowing for scrollbar */
    height: 1.75em;
    background: #f0f0f0; /* Light Grey */
    }

    #siteimg { /* Large Site Image */
    width: 770px; /* Suits an 800×600 page, allowing for scrollbar */
    height: 200px;
    background: url(‘images/siteimage.jpg’) #fff; /* Light Grey */
    }

    #lftcol {
    float: left;
    width: 200px;
    background: transparent;
    overflow: hidden
    }

    #rgtcol {
    float: left;
    width: 570px;
    background: transparent;
    overflow: hidden
    }

    #bttmbar { /* bottom bar, containing top button and copyright info etc */
    float: right;
    width: 570px;
    height: 3em;
    line-height: 3em;
    background: #fff;
    overflow: hidden
    }

    /* Main Navigation */
    #nav ul {display: inline}

    #nav li {display: inline}

    #nav a {
    line-height: 30px; /* same as height of nav bar */
    margin-left: 10px;
    display: inline;
    font-weight: bold
    }

    #nav a span {color: #333}

    /* Forms, Input boxes and buttons */
    form.login {float: right; height: 3em; line-height: 3em; margin: 10px 0 0 0; width: 8.0em;}
    input.login {border: 1px solid #333; width: 6em; font-size: 0.95em;}
    input.loginbttn {border: 0px solid #fff; width: 3em; background: #00A2FF; color: #fff; font-size: 1.0em}

    /* Images */
    img.rightimg {float: right; margin-left: 10px}
    img.leftimg {float: left; margin-right: 10px}

    img.languageimg {float: right; margin: 4px 2px 0 0} /* used for the language flags */
    qualcuno mi puo’ aiutare .. grazie

  2. Il metodo non è supportato da IE5 in giù(oltre che IE6 in modalità quirk).
    Per centrare un box con questi browser bisogna inserire text-align: center; nell’elemento genitore.

Lascia una risposta

Il tuo indirizzo email non sarà pubblicato.