Come allineare un <div> al centro (orizzontalmente/larghezza) della pagina

Ho un tag div con larghezza impostata a 800 pixel. Quando la larghezza del browser è maggiore di 800 pixel, non dovrebbe allungare il div, ma dovrebbe portarlo al centro della pagina.

Peter Mortensen
Domanda modificata 24º marzo 2019 в 10:51
Programmazione
html css center alignment
5º giugno 2009 в 1:44
18 visualizzazioni
Soluzione

    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
thirtydot
Risposta modificata 7º marzo 2012 в 4:48
Commentari (10)

  1. Vuoi dire che vuoi centrarlo verticalmente o orizzontalmente? Hai detto che hai specificato la "altezza" a 800 pixel, e volevi che il div non si allungasse quando la "larghezza" era maggiore di quella...

  2. Per centrare orizzontalmente, puoi usare l'attributo margin: auto; in CSS. Inoltre, dovrai assicurarti che gli elementi body e html non abbiano alcun margine o padding:

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
Peter Mortensen
Risposta modificata 24º marzo 2019 в 10:53
Commentari (0)

Per farlo funzionare correttamente anche in Internet Explorer 6 devi fare come segue:

HTML


    <div class="centered">
        centered content
    </div>

CSS

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}
Peter Mortensen
Risposta modificata 24º marzo 2019 в 10:53
Commentari (1)