Cómo alinear un <div> al centro (horizontal/ancho) de la página

Tengo una etiqueta div con width establecido en 800 píxeles. Cuando el ancho del navegador es mayor que 800 píxeles, no debería estirar el div, sino que debería llevarlo al centro de la página.

Peter Mortensen
Pregunta editada 24º marzo 2019 в 10:51
Programación
html css center alignment
5º junio 2009 в 1:44
21 vistas
Solución

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

  1. ¿Quieres decir que quieres centrarlo vertical u horizontalmente? Dijiste que habías especificado el height a 800 píxeles, y querías que el div no se estirara cuando el width fuera mayor que eso...

  2. Para centrar horizontalmente, puedes utilizar el atributo margin: auto; en CSS. Además, tendrás que asegurarte de que los elementos body y html no tienen ningún margen o relleno:

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

Para que también funcione correctamente en Internet Explorer 6 hay que hacerlo de la siguiente manera:

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
Respuesta editada 24º marzo 2019 в 10:53
Comentarios (1)