Presentaciones

ejer-0-card

Flexbox-altura

ejer-01-card

ejer-04-card-tabla

ejer-06-card-form

 ejer1-css1.html

.-------------------------

ejer-04-card-flex

ejer-03-card-flex

super1

super2

php


Tipo de centradoPropiedades CSSCómo afecta al Box ModelCuándo usarlo
Texto horizontaltext-align: center;Afecta solo al contenido inline o texto dentro del elemento. No modifica margin, padding ni border del contenedor.Centrar texto o elementos inline dentro de un bloque.
Bloque horizontalmargin: 0 auto;
width: [valor];		Utiliza margin izquierdo y derecho automáticos. Requiere un width definido. El padding y border se suman al ancho total si no se usa box-sizing: border-box;.Centrar un elemento de bloque con ancho definido dentro de su contenedor.
Flexbox (centrado perfecto)display: flex;
justify-content: center;
align-items: center;		Aplica centrado dentro del contenedor flex. El padding del contenedor afecta el espacio interno, el margin del hijo afecta su separación externa. El centrado ocurre en el área de content + padding del contenedor.Centrar cualquier elemento (horizontal y vertical) dentro de un contenedor. Ideal para layouts modernos.
Grid (centrado perfecto)display: grid;
place-items: center;		Similar a Flexbox: centra los elementos dentro de las celdas de la cuadrícula. El padding del contenedor reduce el área disponible, el margin del hijo lo separa del centro exacto.Alternativa compacta a Flexbox. Centrado perfecto en ambas direcciones con una sola línea.

📦 Esquema del Box Model para recordar:

text
┌─────────────────────────────────────┐
│            MARGIN (exterior)        │
│  ┌───────────────────────────────┐  │
│  │        BORDER (borde)         │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │     PADDING (relleno)   │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │     CONTENT       │  │  │  │
│  │  │  │   (texto/imagen)  │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

💡 Notas clave:

PropiedadFunción en centrado
margin: 0 auto;Solo funciona si el elemento tiene width definido y es de bloque.
paddingEn Flexbox/Grid, el centrado se calcula dentro del área después de aplicar padding.
box-sizing: border-box;Hace que width incluya padding y bor


Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

layout-card

  .container { display : flex ; justify-content : center ; min-height : 100vh ; border : 3px solid green ; padding-top : 50px ; /* Ajusta este valor para bajar la card */ } CSS completamente documentado, explicando cada propiedad: html <! DOCTYPE html > < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > Card como imagen </ title > </ head > < style > /* RESETEO DE ESTILOS POR DEFECTO DEL NAVEGADOR */ /* Elimina todos los márgenes y paddings que los navegadores añaden por defecto */ * { margin: 0; padding: 0; /* box-sizing: border-box; /* Opcional: hace que padding no aumente el tamaño */ } /* ESTILOS DEL BODY */ /* Fondo gris claro y fuente principal para toda la página */ body { ...
Leer más