Post Top Ad

Your Ad Spot

jueves, 8 de octubre de 2020

Centrar texto en CSS horizontal y verticalmente con Flexbox

 En este artículo, aprenderemos cómo centrar texto en CSS horizontal y verticalmente con Flexbox.

HTML tiene la <center>etiqueta para centrar el texto, pero también puede usar la text-alignpropiedad CSS con el centervalor para centrar el texto horizontalmente.

Para centrar el texto verticalmente en CSS, tenemos formas nuevas y antiguas. Por ejemplo, puede establecer la altura de la línea de su texto a la misma altura que el contenedor del texto o, mejor aún, usar Flexbox simplemente estableciendo las propiedades justify-contentalign-itemsen center.

Esto es lo que cubriremos en este artículo:

  • Centrar texto sin CSS usando la <center></center>etiqueta,
  • Centrado de texto con CSS.
  • Centrado de texto horizontalmente usando text-alignpropiedad.
  • Centrado de texto verticalmente con Flexbox.

Centrado de texto horizontalmente sin CSS usando la <center></center>etiqueta

Puede utilizar la <center>etiqueta para centrar el texto adjunto. Este es un ejemplo rápido:

<center>This text will be centered!</center>

Tenga en cuenta que esta no es la forma recomendada de centrar el texto. Además, la <center>etiqueta ahora está obsoleta. Si el evento aún funciona, debe usar CSS para centrar el texto y manejar la presentación.

Centrado de texto horizontalmente con CSS

Puede centrar texto en CSS muy fácilmente usando la text-alignpropiedad con una centerpropiedad.

Para un elemento de texto que desee centrar en su página, puede usar la stylepropiedad con la propiedad text-align de la siguiente manera:

<p style="text-align:center">This text will be centered!</p>

Simplemente establecemos el valor de text-aligncenter.

Usar una clase CSS para centrar el texto horizontalmente

En caso de que necesite centrar varios elementos de texto, es mejor utilizar una clase CSS en lugar de repetir el mismo código de centrado de texto CSS en varios elementos de su documento HTML. Por ejemplo:

<style>
.centered-text {
 text-align: center
}
</style>

Luego puede aplicar la .centered-textclase a su elemento de texto para centrarlo de la siguiente manera:

<p class="centered-text">This text is centered!</p>

También puede utilizar el pselector de CSS para centrar el texto en todos los <p>elementos de su documento HTML:

<style>
p {
 text-align:center
}
</style>

Entonces, como hemos visto, alinear texto horizontalmente en CSS es bastante fácil. Sólo se necesita añadir la stylepropiedad y establecer el text-aligncenter, o también utilizando una clase o un selector CSS.

Centrado de texto en CSS verticalmente usando la altura de la línea

Lo que es más intimidante es centrar el texto verticalmente.

Existen métodos CSS nuevos y antiguos para hacer eso.

Por ejemplo, para una línea de texto, puede centrarla verticalmente fácilmente configurando la altura de la línea para que tenga la misma altura que el contenedor. Nuestro contenedor tiene 500 píxeles de altura, por lo que si solo tenemos una línea de texto, simplemente establecemos la altura de la línea en 500 píxeles y ese texto estará centrado verticalmente.

Centrado de texto en CSS verticalmente con Flexbox

Pero si tienes más de una línea de texto, el truco anterior no funcionará si queremos centrarlos verticalmente. Afortunadamente para nosotros, existe un enfoque moderno que utiliza el diseño CSS Flexbox.

Tomemos este ejemplo:

<div class="container">
    <h1>Center text</h1>
    <h2>With Flexbox</h2>
</div>
.container h1, .container h2 {
  text-align: center;
}

.container {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Simplemente establecemos la displaypropiedad en flexy luego establecemos las propiedades justify-contentalign-itemsen center.

Conclusión

En este artículo, hemos visto cómo centrar el texto horizontalmente usando la text-alignpropiedad con el centervalor.

Para centrar el texto verticalmente en CSS, hemos visto tanto una forma antigua como una nueva. Por ejemplo, estableciendo la altura de la línea del texto para que esté centrada a la misma altura que el contenedor 

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas