LM | DÍA 18: CENTRAR ELEMENTOS Y POSICIONAMIENTO

Día 18. En el día de hoy, hemos seguido trabajando sobre centrar el layout y los elementos que nosotros como programadores indiquemos. 

Para ello, vimos de una manera más práctica este tema con el código CSS que nos proporcionó nuestro profesor. Además, modificamos el código desde la herramienta de Inspeccionar de nuestro navegador. 

Es un tema muy importante de cara a la elaboración de nuestros proyectos de maquetación y codificación de nuestras páginas web.

Derechos de autor aquí

Centrado Horizontal:

• Elementos en línea: text-align: center
• Elementos en Bloque: margin: auto
• Elementos en Bloque en la misma fila: 
• text-align: center;
• display:inline-block
• Con contenedores flex

Centrado Vertical:

Centrado Vertial ; elementos en línea

• El mismo pading arriba y abajo
• Si dentro del elemento tabla o se está simulando como propiedad display: vertical-align: middle
• Con contenedores flex

Centrado vertical; elementos en bloque

• Utilizando la propiedad position en el contenedor y en el elemento 
• Con contenedores flex

Posicionamiento: 

Existen varias propiedades position: 

• static. Es el valor por defecto. 
• Relative: Es como la propiedad static pero sí atiende al top, bottom, left, right o z-index.
• fixed; Se le aplica a top, bottom, left, right o z-index en relación al documento, No atiende al scroll.
• absolute: Se comporta como fixed pero en relación a la primera etiqueta antecesora que tenga position: relative.
• sticky: relative hasta llegar a una posición de scroll y a partir de entonces fixed.
• inherit: La propiedad position no se propaga en cascada. Si queremos que sea así añadiremos el vaor inherit a los hijos que queremos que hereden