Header Ads Widget

Ticker

6/recent/ticker-posts

Ejemplo de centrado CSS con angular 7/8

 En este tutorial, aprenderemos cómo centrar elementos en CSS y Angular 7/8 usando el diseño moderno de Flexbox.

Centrar elementos en CSS, ya sea horizontal o verticalmente, siempre fue complicado y los desarrolladores han utilizado muchos métodos que a veces ni siquiera tienen sentido, especialmente para los principiantes.

Pero con la llegada de Flexbox, el centrado de CSS se volvió más fácil y claro que nunca.

Usaremos Stackblitz para nuestro proyecto Angular.

Centrado horizontal

Comencemos con el centrado horizontal. Abra el src/app/app.component.htmlarchivo y agregue lo siguiente <div>:

<div class="center">
  <h1>Hello Angular 8!</h1>
</div>

Agregamos un divcon una centerclase. Dentro de él, agregamos una <h1>etiqueta.

A continuación, abra el src/app/app.component.cssarchivo y agregue la centerclase con los siguientes estilos:

.center {
  display: flex;
  justify-content: center;
}

Eso es. nuestro contenido está centrado horizontalmente simplemente haciendo divun contenedor flexible y usando la justify-contentpropiedad. Aquí hay una captura de pantalla:

Ejemplo de Centro CSS

Centrado vertical

Ahora, veamos cómo podemos centrar el contenido verticalmente usando Flexbox.

También es fácil lograrlo usando Flexbox simplemente agregando align-items: center.

Primero agreguemos los siguientes estilos para cambiar el color y la altura del contenedor divpara que podamos ver el contenido claramente centrado verticalmente:

.center {
  display: flex;
  height: 300px;
  background-color: #ff1124;
  justify-content: center;
}

Este es el resultado:

Centrado CSS

Ahora, apliquemos el centrado vertical:

.center {
  display: flex;
  height: 300px;
  background-color: #ff1124;
  justify-content: center;
  align-items: center;
}

Este es el resultado:

Esto centrará cualquier elemento dentro del divSi desea centrar elementos específicos, puede usar align-self: center, en su lugar, en el elemento.

.center {
  display: flex;
  height: 300px;
  background-color: #ff1124;
  justify-content: center;
}

.center h1{
  align-self: center;
}

Si necesita centrarse en toda la página, simplemente puede darle al div la misma altura que la página:

.center {
  display: flex;
  background-color: #ff1124;
  justify-content: center;
  height: 100vh;
}


.center h1{
  align-self: center;
}

Esta es una captura de pantalla:

Ejemplo de Centro CSS

Conclusión

En este ejemplo rápido, hemos visto cómo podemos centrar elementos en CSS horizontal y verticalmente usando Flexblox, que proporciona formas fáciles y claras de lograrlo sin recurrir a viejos trucos de CSS.

Este ejemplo se demostró con un proyecto de Angular 8, pero estos trucos no están vinculados a Angular de ninguna manera.


Publicar un comentario

0 Comentarios