- Teoría
- Teoría
Márgenes automáticos
Ya terminamos con las columnas. Ahora ajustaremos el propio <main>. Según el diseño, el contenido principal debe tener un ancho fijo y estar centrado en la página:
Es frecuente tener que centrar un elemento. Hay muchas formas de hacerlo; usaremos una de las más habituales. Necesitamos:
- definir un ancho menor que el del elemento padre;
- agregar márgenes automáticos a la derecha y a la izquierda.
Empecemos por el ancho. El elemento padre de <main> es <body>, una caja de bloque que ocupa todo el ancho de la ventana del navegador. Por eso basta con que <main> sea más estrecho que la ventana para que también sea más estrecho que su elemento padre.
Después definiremos los márgenes. Hasta ahora usamos valores en píxeles, pero margin también admite auto. Por ejemplo:
margin-left: auto;Este valor le pide al navegador que calcule el margen. El navegador es generoso: le asigna todo el espacio libre del contenedor padre. Por eso, si agregamos un margen izquierdo automático, el elemento queda pegado al lado derecho de su elemento padre.
Si ambos márgenes horizontales son automáticos, el espacio libre se reparte por igual entre ellos y el elemento queda centrado.
Ya sabemos cómo centrar el contenido principal. Definiremos su ancho con width y agregaremos márgenes automáticos a ambos lados.
Este recurso es práctico, pero tiene limitaciones. No permite centrar cajas en línea. Además, dentro de una caja de bloque, a diferencia de un contenedor flex, solo permite centrar un elemento en horizontal.
- index.html
- style.css
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
- Define un ancho de
550pxpara la clasepage-main. - Agrega un margen izquierdo automático.
El contenido principal quedará pegado al borde derecho de la página. - Ahora agrega un margen derecho automático.
El contenido principal quedará centrado en la página.