Como alinhar um <div> ao meio (horizontalmente/largura) da página

Eu tenho uma tag div com largura definida para 800 pixels. Quando a largura do navegador é maior que 800 pixels, ele não deve esticar o div, mas deve levá-lo para o meio da página.

Solução

    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
Comentários (10)
  1. Quer dizer que a quer centrar verticalmente ou horizontalmente? Você disse que especificou a "altura" para 800 pixels, e queria que o mergulho não esticasse quando a "largura" fosse maior que isso...

  2. Para centralizar horizontalmente, você pode utilizar o atributo margin: auto; no CSS. Além disso, você'terá que ter certeza que os elementos body e html não'não têm nenhuma margem ou acolchoamento:

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
Comentários (0)

Para que também funcione correctamente no Internet Explorer 6 tem de o fazer da seguinte forma:

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;
}
Comentários (1)