¿Cómo hacer que el contenedor div principal se alinee al centro?

4 minutos de lectura

Avatar de usuario de Amra
Amra

Siempre me he preguntado cómo otras personas logran alinear al centro el contenedor div principal, ya que la única forma en que lo logro hasta ahora es agregar al archivo css lo siguiente:

*{
padding:auto;
margin:auto;
text-align:centre;
}

He visto otras páginas usando: *{padding:0px;margin:0px} pero no puedo ver dónde o qué hacen para centralizar el contenedor principal.

¿Alguien podría explicar cómo?

Ejemplo de código:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>This is the main container</title>
<style type="text/css">
*{
padding:auto;
margin:auto;
text-align:center;
}
</style>
</head>
<body>
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;">
<b>This is the main container.</b>
</div>
</body>
</html>

¿Alguien podría explicar cómo lo hacen en la página siguiente?

http://www.csszengarden.com/?cssfile=/179/179.css&page=4

  • también puede envolver su contenido con

    , pero una mejor solución está debajo

    – hormiga

    17 de febrero de 2010 a las 9:33

  • en la página a la que se vinculó, usan margen automático en el contenedor. Sin embargo, el relleno automático no es necesario e incluso puede confundir a algunos navegadores.

    – donde srhys

    17 de febrero de 2010 a las 10:31

  • @wheresrhys: Gracias, no puedo encontrarlo en el css.

    – Amra

    17 de febrero de 2010 a las 13:12

  • Debes instalar firebug (si estás usando firefox). Haga clic en la pestaña html, luego en el div de envoltura y en el panel derecho le indica todos los estilos

    – donde srhys

    17 de febrero de 2010 a las 13:41


Avatar de usuario de Tatu Ulmanen
Tatu Ulmanen

No use el * selector ya que se aplicará a todos los elementos de la página. Supongamos que tiene una estructura como esta:

...
<body>
    <div id="content">
        <b>This is the main container.</b>
    </div>
</body>
</html>

A continuación, puede centrar la #content división usando:

#content {
    width: 400px;
    margin: 0 auto;
    background-color: #66ffff;
}

No sé lo que has visto en otros lugares, pero este es el camino a seguir. los * { margin: 0; padding: 0; } El fragmento de código que ha visto es para restablecer las definiciones predeterminadas del navegador para todos los navegadores para que su sitio se comporte de manera similar en todos los navegadores, esto no tiene nada que ver con centrar el contenedor principal.

La mayoría de los navegadores aplican un margen y relleno predeterminados a algunos elementos que, por lo general, no son consistentes con las implementaciones de otros navegadores. Esta es la razón por la que a menudo se considera inteligente utilizar este tipo de ‘reinicio’. El fragmento de reinicio que presentó es la más simple de las hojas de estilo de reinicio, puede leer más sobre el tema aquí:

  • ¿No es una buena práctica aplicar *{padding:0px;margin:0px;}, para que sea más compatible con varios navegadores?

    – Amra

    17 de febrero de 2010 a las 9:34

  • @Cesar Lopes, en mi opinión lo es, pero parece que hay gente que piensa lo contrario. Pero yo diría que adelante.

    – Tatu Ulmanen

    17 de febrero de 2010 a las 9:38

  • Gracias por tu gran pregunta.

    – Amra

    17 de febrero de 2010 a las 9:57

Avatar de usuario de Kids Formal
niños formales

El principio básico de centrar una página es tener un cuerpo CSS y main_container CSS. Debería verse algo como esto:

body {
     margin: 0;
     padding: 0;
     text-align: center;
}
#main_container {
     margin: 0 auto;
     text-align: left;
}

Puede alinear el texto: centre el cuerpo para centrar el contenedor. Luego text-align: left the container para obtener todo el texto, etc. para alinear a la izquierda.

  • Bienvenido a Stack Overflow =) Tómese un momento para leer la página de ayuda de Stack Overflow Markdown para obtener orientación sobre cómo formatear sus respuestas.

    –David Tomás

    2 de febrero de 2011 a las 20:34


omitiría el * { text-align:center } declaración, ya que establece la alineación central para todos los elementos.

Usualmente con un contenedor de ancho fijo margin: 0 auto debería ser suficiente

¿Ha sido útil esta solución?